Multi Chart Work flow

Bindable Properties

  1. item
  2. options
  3. evtChartClickCallback
  4. evtBtnClickCallback

Overview

Multi Chart component with Prev/Next and Drill down functionality.

Features/Functionality

  • Chart will be drawn by given data.
  • Previous/Next charts will be loaded for parent chart only.
  • Charts can be drilled down and a breadcrumb will be shown for drilled down charts.
  • READABLE CODE
  • Component is container responsive.
  • It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Defaults

  • options.isPrevNext: false

Breakdown

  • Set defaults.
  • Set initial activeId as 1.
  • On click of Prev/Next Btn
    • Create new id using relative Number.
    • Reset single chart instance.
    • Call event callback.
    • After promise is resolved, Set lastId if chart.isLast is true.
  • On click of chart
    • If active chart is last, then show alert. Else do following steps.
    • Create new id.
    • Reset single chart instance.
    • Call event callback.
    • After promise is resolved, set new active id and set if chart is multi level.
  • On click of breadcrumb, set active id and multi level.