feat:Added piechart in Dashboard

2025-02-22 15:35:48 +05:30
parent 357071b967
commit f7cb1af2c4
384 changed files with 112765 additions and 8 deletions
@@ -0,0 +1,88 @@
+export default class Destroy {
+  constructor(ctx) {
+    this.ctx = ctx
+    this.w = ctx.w
+  }
+
+  clear({ isUpdating }) {
+    if (this.ctx.zoomPanSelection) {
+      this.ctx.zoomPanSelection.destroy()
+    }
+    if (this.ctx.toolbar) {
+      this.ctx.toolbar.destroy()
+    }
+
+    this.ctx.animations = null
+    this.ctx.axes = null
+    this.ctx.annotations = null
+    this.ctx.core = null
+    this.ctx.data = null
+    this.ctx.grid = null
+    this.ctx.series = null
+    this.ctx.responsive = null
+    this.ctx.theme = null
+    this.ctx.formatters = null
+    this.ctx.titleSubtitle = null
+    this.ctx.legend = null
+    this.ctx.dimensions = null
+    this.ctx.options = null
+    this.ctx.crosshairs = null
+    this.ctx.zoomPanSelection = null
+    this.ctx.updateHelpers = null
+    this.ctx.toolbar = null
+    this.ctx.localization = null
+    this.ctx.w.globals.tooltip = null
+    this.clearDomElements({ isUpdating })
+  }
+
+  killSVG(draw) {
+    draw.each(function(i, children) {
+      this.removeClass('*')
+      this.off()
+      this.stop()
+    }, true)
+    draw.ungroup()
+    draw.clear()
+  }
+
+  clearDomElements({ isUpdating }) {
+    const elSVG = this.w.globals.dom.Paper.node
+    // fixes apexcharts.js#1654 & vue-apexcharts#256
+    if (elSVG.parentNode && elSVG.parentNode.parentNode && !isUpdating) {
+      elSVG.parentNode.parentNode.style.minHeight = 'unset'
+    }
+
+    // detach root event
+    const baseEl = this.w.globals.dom.baseEl
+    if (baseEl) {
+      // see https://github.com/apexcharts/vue-apexcharts/issues/275
+      this.ctx.eventList.forEach((event) => {
+        baseEl.removeEventListener(event, this.ctx.events.documentEvent)
+      })
+    }
+
+    const domEls = this.w.globals.dom
+
+    if (this.ctx.el !== null) {
+      // remove all child elements - resetting the whole chart
+      while (this.ctx.el.firstChild) {
+        this.ctx.el.removeChild(this.ctx.el.firstChild)
+      }
+    }
+
+    this.killSVG(domEls.Paper)
+    domEls.Paper.remove()
+
+    domEls.elWrap = null
+    domEls.elGraphical = null
+    domEls.elLegendWrap = null
+    domEls.elLegendForeign = null
+    domEls.baseEl = null
+    domEls.elGridRect = null
+    domEls.elGridRectMask = null
+    domEls.elGridRectMarkerMask = null
+    domEls.elForecastMask = null
+    domEls.elNonForecastMask = null
+    domEls.elDefs = null
+  }
+}
@@ -0,0 +1,107 @@
+import Events from '../Events'
+import Localization from './Localization'
+import Animations from '../Animations'
+import Axes from '../axes/Axes'
+import Config from '../settings/Config'
+import CoreUtils from '../CoreUtils'
+import Crosshairs from '../Crosshairs'
+import Grid from '../axes/Grid'
+import Graphics from '../Graphics'
+import Exports from '../Exports'
+import Options from '../settings/Options'
+import Responsive from '../Responsive'
+import Series from '../Series'
+import Theme from '../Theme'
+import Formatters from '../Formatters'
+import TitleSubtitle from '../TitleSubtitle'
+import Legend from '../legend/Legend'
+import Toolbar from '../Toolbar'
+import Dimensions from '../dimensions/Dimensions'
+import ZoomPanSelection from '../ZoomPanSelection'
+import Tooltip from '../tooltip/Tooltip'
+import Core from '../Core'
+import Data from '../Data'
+import UpdateHelpers from './UpdateHelpers'
+
+import '../../svgjs/svg.js'
+import 'svg.filter.js'
+import 'svg.pathmorphing.js'
+import 'svg.draggable.js'
+import 'svg.select.js'
+import 'svg.resize.js'
+
+// global Apex object which user can use to override chart's defaults globally
+if (typeof window.Apex === 'undefined') {
+  window.Apex = {}
+}
+
+export default class InitCtxVariables {
+  constructor(ctx) {
+    this.ctx = ctx
+    this.w = ctx.w
+  }
+
+  initModules() {
+    this.ctx.publicMethods = [
+      'updateOptions',
+      'updateSeries',
+      'appendData',
+      'appendSeries',
+      'isSeriesHidden',
+      'toggleSeries',
+      'showSeries',
+      'hideSeries',
+      'setLocale',
+      'resetSeries',
+      'zoomX',
+      'toggleDataPointSelection',
+      'dataURI',
+      'exportToCSV',
+      'addXaxisAnnotation',
+      'addYaxisAnnotation',
+      'addPointAnnotation',
+      'clearAnnotations',
+      'removeAnnotation',
+      'paper',
+      'destroy'
+    ]
+
+    this.ctx.eventList = [
+      'click',
+      'mousedown',
+      'mousemove',
+      'mouseleave',
+      'touchstart',
+      'touchmove',
+      'touchleave',
+      'mouseup',
+      'touchend'
+    ]
+
+    this.ctx.animations = new Animations(this.ctx)
+    this.ctx.axes = new Axes(this.ctx)
+    this.ctx.core = new Core(this.ctx.el, this.ctx)
+    this.ctx.config = new Config({})
+    this.ctx.data = new Data(this.ctx)
+    this.ctx.grid = new Grid(this.ctx)
+    this.ctx.graphics = new Graphics(this.ctx)
+    this.ctx.coreUtils = new CoreUtils(this.ctx)
+    this.ctx.crosshairs = new Crosshairs(this.ctx)
+    this.ctx.events = new Events(this.ctx)
+    this.ctx.exports = new Exports(this.ctx)
+    this.ctx.localization = new Localization(this.ctx)
+    this.ctx.options = new Options()
+    this.ctx.responsive = new Responsive(this.ctx)
+    this.ctx.series = new Series(this.ctx)
+    this.ctx.theme = new Theme(this.ctx)
+    this.ctx.formatters = new Formatters(this.ctx)
+    this.ctx.titleSubtitle = new TitleSubtitle(this.ctx)
+    this.ctx.legend = new Legend(this.ctx)
+    this.ctx.toolbar = new Toolbar(this.ctx)
+    this.ctx.tooltip = new Tooltip(this.ctx)
+    this.ctx.dimensions = new Dimensions(this.ctx)
+    this.ctx.updateHelpers = new UpdateHelpers(this.ctx)
+    this.ctx.zoomPanSelection = new ZoomPanSelection(this.ctx)
+    this.ctx.w.globals.tooltip = new Tooltip(this.ctx)
+  }
+}
@@ -0,0 +1,39 @@
+import Utils from '../../utils/Utils'
+
+import en from '../../locales/en.json'
+
+export default class Localization {
+  constructor(ctx) {
+    this.ctx = ctx
+    this.w = ctx.w
+  }
+
+  setCurrentLocaleValues(localeName) {
+    let locales = this.w.config.chart.locales
+
+    // check if user has specified locales in global Apex variable
+    // if yes - then extend those with local chart's locale
+    if (
+      window.Apex.chart &&
+      window.Apex.chart.locales &&
+      window.Apex.chart.locales.length > 0
+    ) {
+      locales = this.w.config.chart.locales.concat(window.Apex.chart.locales)
+    }
+
+    // find the locale from the array of locales which user has set (either by chart.defaultLocale or by calling setLocale() method.)
+    const selectedLocale = locales.filter((c) => c.name === localeName)[0]
+
+    if (selectedLocale) {
+      // create a complete locale object by extending defaults so you don't get undefined errors.
+      let ret = Utils.extend(en, selectedLocale)
+
+      // store these locale options in global var for ease access
+      this.w.globals.locale = ret.options
+    } else {
+      throw new Error(
+        'Wrong locale name provided. Please make sure you set the correct locale name in options'
+      )
+    }
+  }
+}
@@ -0,0 +1,303 @@
+import Defaults from '../settings/Defaults'
+import Config from '../settings/Config'
+import CoreUtils from '../CoreUtils'
+import Graphics from '../Graphics'
+import Utils from '../../utils/Utils'
+
+export default class UpdateHelpers {
+  constructor(ctx) {
+    this.ctx = ctx
+    this.w = ctx.w
+  }
+
+  /**
+   * private method to update Options.
+   *
+   * @param {object} options - A new config object can be passed which will be merged with the existing config object
+   * @param {boolean} redraw - should redraw from beginning or should use existing paths and redraw from there
+   * @param {boolean} animate - should animate or not on updating Options
+   * @param {boolean} overwriteInitialConfig - should update the initial config or not
+   */
+  _updateOptions(
+    options,
+    redraw = false,
+    animate = true,
+    updateSyncedCharts = true,
+    overwriteInitialConfig = false
+  ) {
+    return new Promise((resolve) => {
+      let charts = [this.ctx]
+      if (updateSyncedCharts) {
+        charts = this.ctx.getSyncedCharts()
+      }
+
+      if (this.ctx.w.globals.isExecCalled) {
+        // If the user called exec method, we don't want to get grouped charts as user specifically provided a chartID to update
+        charts = [this.ctx]
+        this.ctx.w.globals.isExecCalled = false
+      }
+
+      charts.forEach((ch, chartIndex) => {
+        let w = ch.w
+
+        w.globals.shouldAnimate = animate
+
+        if (!redraw) {
+          w.globals.resized = true
+          w.globals.dataChanged = true
+
+          if (animate) {
+            ch.series.getPreviousPaths()
+          }
+        }
+
+        if (options && typeof options === 'object') {
+          ch.config = new Config(options)
+          options = CoreUtils.extendArrayProps(ch.config, options, w)
+
+          // fixes #914, #623
+          if (ch.w.globals.chartID !== this.ctx.w.globals.chartID) {
+            // don't overwrite series of synchronized charts
+            delete options.series
+          }
+
+          w.config = Utils.extend(w.config, options)
+
+          if (overwriteInitialConfig) {
+            // we need to forget the lastXAxis and lastYAxis as user forcefully overwriteInitialConfig. If we do not do this, and next time when user zooms the chart after setting yaxis.min/max or xaxis.min/max - the stored lastXAxis will never allow the chart to use the updated min/max by user.
+            w.globals.lastXAxis = options.xaxis
+              ? Utils.clone(options.xaxis)
+              : []
+            w.globals.lastYAxis = options.yaxis
+              ? Utils.clone(options.yaxis)
+              : []
+
+            // After forgetting lastAxes, we need to restore the new config in initialConfig/initialSeries
+            w.globals.initialConfig = Utils.extend({}, w.config)
+            w.globals.initialSeries = Utils.clone(w.config.series)
+
+            if (options.series) {
+              // Replace the collapsed series data
+              for (
+                let i = 0;
+                i < w.globals.collapsedSeriesIndices.length;
+                i++
+              ) {
+                let series =
+                  w.config.series[w.globals.collapsedSeriesIndices[i]]
+                w.globals.collapsedSeries[i].data = w.globals.axisCharts
+                  ? series.data.slice()
+                  : series
+              }
+              for (
+                let i = 0;
+                i < w.globals.ancillaryCollapsedSeriesIndices.length;
+                i++
+              ) {
+                let series =
+                  w.config.series[w.globals.ancillaryCollapsedSeriesIndices[i]]
+                w.globals.ancillaryCollapsedSeries[i].data = w.globals
+                  .axisCharts
+                  ? series.data.slice()
+                  : series
+              }
+
+              // Ensure that auto-generated axes are scaled to the visible data
+              ch.series.emptyCollapsedSeries(w.config.series)
+            }
+          }
+        }
+
+        return ch.update(options).then(() => {
+          if (chartIndex === charts.length - 1) {
+            resolve(ch)
+          }
+        })
+      })
+    })
+  }
+
+  /**
+   * Private method to update Series.
+   *
+   * @param {array} series - New series which will override the existing
+   */
+  _updateSeries(newSeries, animate, overwriteInitialSeries = false) {
+    return new Promise((resolve) => {
+      const w = this.w
+
+      w.globals.shouldAnimate = animate
+
+      w.globals.dataChanged = true
+
+      if (animate) {
+        this.ctx.series.getPreviousPaths()
+      }
+
+      let existingSeries
+
+      // axis charts
+      if (w.globals.axisCharts) {
+        existingSeries = newSeries.map((s, i) => {
+          return this._extendSeries(s, i)
+        })
+
+        if (existingSeries.length === 0) {
+          existingSeries = [{ data: [] }]
+        }
+        w.config.series = existingSeries
+      } else {
+        // non-axis chart (pie/radialbar)
+        w.config.series = newSeries.slice()
+      }
+
+      if (overwriteInitialSeries) {
+        w.globals.initialConfig.series = Utils.clone(w.config.series)
+        w.globals.initialSeries = Utils.clone(w.config.series)
+      }
+      return this.ctx.update().then(() => {
+        resolve(this.ctx)
+      })
+    })
+  }
+
+  _extendSeries(s, i) {
+    const w = this.w
+    const ser = w.config.series[i]
+
+    return {
+      ...w.config.series[i],
+      name: s.name ? s.name : ser?.name,
+      color: s.color ? s.color : ser?.color,
+      type: s.type ? s.type : ser?.type,
+      group: s.group ? s.group : ser?.group,
+      data: s.data ? s.data : ser?.data,
+      zIndex: typeof s.zIndex !== 'undefined' ? s.zIndex : i,
+    }
+  }
+
+  toggleDataPointSelection(seriesIndex, dataPointIndex) {
+    const w = this.w
+    let elPath = null
+    const parent = `.apexcharts-series[data\\:realIndex='${seriesIndex}']`
+
+    if (w.globals.axisCharts) {
+      elPath = w.globals.dom.Paper.select(
+        `${parent} path[j='${dataPointIndex}'], ${parent} circle[j='${dataPointIndex}'], ${parent} rect[j='${dataPointIndex}']`
+      ).members[0]
+    } else {
+      // dataPointIndex will be undefined here, hence using seriesIndex
+      if (typeof dataPointIndex === 'undefined') {
+        elPath = w.globals.dom.Paper.select(
+          `${parent} path[j='${seriesIndex}']`
+        ).members[0]
+
+        if (
+          w.config.chart.type === 'pie' ||
+          w.config.chart.type === 'polarArea' ||
+          w.config.chart.type === 'donut'
+        ) {
+          this.ctx.pie.pieClicked(seriesIndex)
+        }
+      }
+    }
+
+    if (elPath) {
+      const graphics = new Graphics(this.ctx)
+      graphics.pathMouseDown(elPath, null)
+    } else {
+      console.warn('toggleDataPointSelection: Element not found')
+      return null
+    }
+
+    return elPath.node ? elPath.node : null
+  }
+
+  forceXAxisUpdate(options) {
+    const w = this.w
+    const minmax = ['min', 'max']
+
+    minmax.forEach((a) => {
+      if (typeof options.xaxis[a] !== 'undefined') {
+        w.config.xaxis[a] = options.xaxis[a]
+        w.globals.lastXAxis[a] = options.xaxis[a]
+      }
+    })
+
+    if (options.xaxis.categories && options.xaxis.categories.length) {
+      w.config.xaxis.categories = options.xaxis.categories
+    }
+
+    if (w.config.xaxis.convertedCatToNumeric) {
+      const defaults = new Defaults(options)
+      options = defaults.convertCatToNumericXaxis(options, this.ctx)
+    }
+    return options
+  }
+
+  forceYAxisUpdate(options) {
+    if (
+      options.chart &&
+      options.chart.stacked &&
+      options.chart.stackType === '100%'
+    ) {
+      if (Array.isArray(options.yaxis)) {
+        options.yaxis.forEach((yaxe, index) => {
+          options.yaxis[index].min = 0
+          options.yaxis[index].max = 100
+        })
+      } else {
+        options.yaxis.min = 0
+        options.yaxis.max = 100
+      }
+    }
+    return options
+  }
+
+  /**
+   * This function reverts the yaxis and xaxis min/max values to what it was when the chart was defined.
+   * This function fixes an important bug where a user might load a new series after zooming in/out of previous series which resulted in wrong min/max
+   * Also, this should never be called internally on zoom/pan - the reset should only happen when user calls the updateSeries() function externally
+   * The function also accepts an object {xaxis, yaxis} which when present is set as the new xaxis/yaxis
+   */
+  revertDefaultAxisMinMax(opts) {
+    const w = this.w
+
+    let xaxis = w.globals.lastXAxis
+    let yaxis = w.globals.lastYAxis
+
+    if (opts && opts.xaxis) {
+      xaxis = opts.xaxis
+    }
+    if (opts && opts.yaxis) {
+      yaxis = opts.yaxis
+    }
+    w.config.xaxis.min = xaxis.min
+    w.config.xaxis.max = xaxis.max
+
+    const getLastYAxis = (index) => {
+      if (typeof yaxis[index] !== 'undefined') {
+        w.config.yaxis[index].min = yaxis[index].min
+        w.config.yaxis[index].max = yaxis[index].max
+      }
+    }
+
+    w.config.yaxis.map((yaxe, index) => {
+      if (w.globals.zoomed) {
+        // user has zoomed, check the last yaxis
+        getLastYAxis(index)
+      } else {
+        // user hasn't zoomed, check the last yaxis first
+        if (typeof yaxis[index] !== 'undefined') {
+          getLastYAxis(index)
+        } else {
+          // if last y-axis don't exist, check the original yaxis
+          if (typeof this.ctx.opts.yaxis[index] !== 'undefined') {
+            yaxe.min = this.ctx.opts.yaxis[index].min
+            yaxe.max = this.ctx.opts.yaxis[index].max
+          }
+        }
+      }
+    })
+  }
+}