remove unused libs and css

This commit is contained in:
2025-07-05 17:04:29 +02:00
parent 8833080d06
commit 3669eea8dd
454 changed files with 2 additions and 84156 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@@ -5,7 +5,7 @@
* Copyright 2011-2023 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
@import "../libs/simplebar/dist/simplebar.css";
@import "../css/simplebar.css";
@import "../css/icons/tabler-icons/tabler-icons.css";
:root,
[data-bs-theme=light] {

View File

@@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2018 ApexCharts
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@@ -1,228 +0,0 @@
<p align="center"><img src="https://apexcharts.com/media/apexcharts-logo.png"></p>
<p align="center">
<a href="https://github.com/apexcharts/apexcharts.js/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="License"></a>
<a href="https://travis-ci.com/apexcharts/apexcharts.js"><img src="https://api.travis-ci.com/apexcharts/apexcharts.js.svg?branch=master" alt="build" /></a>
<img alt="downloads" src="https://img.shields.io/npm/dm/apexcharts.svg"/>
<a href="https://www.npmjs.com/package/apexcharts"><img src="https://img.shields.io/npm/v/apexcharts.svg" alt="ver"></a>
<img alt="size" src="https://badgen.net/bundlephobia/min/apexcharts?label=size">
<a href="https://cdn.jsdelivr.net/npm/apexcharts@3.12.0/types/apexcharts.d.ts"><img src="https://badgen.net/npm/types/apexcharts"/></a>
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a>
<a href="https://www.jsdelivr.com/package/npm/apexcharts"><img src="https://data.jsdelivr.com/v1/package/npm/apexcharts/badge" alt="jsdelivr" /></a>
<a href="https://codeclimate.com/github/apexcharts/apexcharts.js"><img src="https://badgen.net/codeclimate/maintainability/apexcharts/apexcharts.js" /></a>
<img src="https://badgen.net/codeclimate/tech-debt/apexcharts/apexcharts.js"/>
</p>
<p align="center">
<a href="https://twitter.com/intent/tweet?text=Create%20visualizations%20with%20this%20free%20and%20open-source%20JavaScript%20Chart%20library&url=https://www.apexcharts.com&hashtags=javascript,charts,visualizations,developers,apexcharts"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a>
</p>
<p align="center">A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards. ApexCharts is an MIT licensed open-source project that can be used in commercial and non-commercial projects.</p>
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/"><img
src="https://apexcharts.com/media/apexcharts-banner.png"></a></p>
<br />
## Browsers support
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Edge | [<img src="https://user-images.githubusercontent.com/17712401/124668393-30772d00-de87-11eb-9360-3199c3b68b95.png" alt="IE" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> IE11 |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 31+ ✔ | 35+ ✔ | 6+ ✔ | Edge ✔ | [(IE11)](#using-it-with-ie11) ✔ |
## Download and Installation
##### Installing via npm
```bash
npm install apexcharts --save
```
##### Direct &lt;script&gt; include
```html
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
```
## Wrappers for Vue/React/Angular/Stencil
Integrate easily with 3rd party frameworks
- [vue-apexcharts](https://github.com/apexcharts/vue-apexcharts)
- [react-apexcharts](https://github.com/apexcharts/react-apexcharts)
- [ng-apexcharts](https://github.com/apexcharts/ng-apexcharts) - Plugin by [Morris Janatzek](https://morrisj.net/)
- [stencil-apexcharts](https://github.com/apexcharts/stencil-apexcharts)
### Unofficial Wrappers
Useful links to wrappers other than the popular frameworks mentioned above
- [apexcharter](https://github.com/dreamRs/apexcharter) - Htmlwidget for ApexCharts
- [apexcharts.rb](https://github.com/styd/apexcharts.rb) - Ruby wrapper for ApexCharts
- [larapex-charts](https://github.com/ArielMejiaDev/larapex-charts) - Laravel wrapper for ApexCharts
- [blazor-apexcharts](https://github.com/apexcharts/Blazor-ApexCharts) - Blazor wrapper for ApexCharts [demo](https://apexcharts.github.io/Blazor-ApexCharts/)
- [svelte-apexcharts](https://github.com/galkatz373/svelte-apexcharts) - Svelte wrapper for ApexCharts
## Usage
```js
import ApexCharts from 'apexcharts'
```
To create a basic bar chart with minimal configuration, write as follows:
```js
var options = {
chart: {
type: 'bar'
},
series: [
{
name: 'sales',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}
],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
}
var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
```
This will render the following chart
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/"><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p>
### A little more than the basic
You can create a combination of different charts, sync them and give your desired look with unlimited possibilities.
Below is an example of synchronized charts with github style.
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/area-charts/github-style/"><img src="https://apexcharts.com/media/github-charts.gif"></a></p>
## Interactivity
Zoom, Pan, Scroll through data. Make selections and load other charts using those selections.
An example showing some interactivity
<p align="center"><a href="https://codepen.io/apexcharts/pen/QrbEQg" target="_blank"><img src="https://apexcharts.com/media/interactivity.gif" alt="interactive chart"></a></p>
## Dynamic Series Update
Another approach to Drill down charts where one selection updates the data of other charts.
An example of loading dynamic series into charts is shown below
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/dynamic-loaded-chart/"><img src="https://apexcharts.com/media/dynamic-selection.gif" alt="dynamic-loading-chart" /></a></p>
## Annotations
Annotations allows you to write custom text on specific values or on axes values. Valuable to expand the visual appeal of your chart and make it more informative.
<p align="center"><a href="https://apexcharts.com/docs/annotations/"><img src="https://apexcharts.com/media/annotations.png" alt="annotations" /></a></p>
## Mixed Charts
You can combine more than one chart type to create a combo/mixed chart. Possible combinations can be line/area/column together in a single chart. Each chart-type can have it's own y-axis.
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/mixed-charts/"><img src="https://apexcharts.com/wp-content/uploads/2018/05/line-column-area-mixed-chart.svg" alt="annotations" width="490" /></a></p>
## Candlestick
Use a candlestick chart (a common financial chart) to describe price changes of a security, derivative, or currency. Below image show how you can use another chart as a brush/preview-pane which acts as a handle to browse the main candlestick chart.
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/candlestick-charts/"><img src="https://apexcharts.com/media/candlestick.png" alt="candlestick" width="490" /></a></p>
## Heatmaps
Use Heatmaps to represent data through colors and shades. Frequently used with bigger data collections, they are valuable for recognizing patterns and area of focus.
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/heatmap-charts/"><img src="https://apexcharts.com/media/heatmap-charts.png" alt="heatmap" /></a></p>
## Gauges
The tiny gauges are an important part of a dashboard and are useful in displaying single series data. A demo of these gauges:
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/radialbar-charts/"><img src="https://apexcharts.com/media/radialbars-gauges.png" width="490" alt="radialbar-chart" /></a></p>
## Sparklines
Utilize sparklines to indicate trends in data, for example, occasional increments or declines, monetary cycles, or to feature most extreme and least values:
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/sparklines/"><img src="https://apexcharts.com/media/sparklines.png" alt="sparkline-chart" /></a></p>
## Need Advanced Data Grid for your next project?
We partnered with Infragistics, creators of the fastest data grids on the planet! Ignite UI Grids can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates.
<p align="center"><a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid" target="_blank"><img src="https://apexcharts.com/media/infragistics-data-grid.png" /></a></p>
Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal hand-on coding. The grid is available in most of your favorite frameworks:
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid">Angular Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/grids">React Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/data-grid">Blazor Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/data-grid">Web Components DataGrid</a> | <a target="_blank" href="https://www.igniteui.com/grid/overview">jQuery Data Grid </a>
## What's included
The download bundle includes the following files and directories providing a minified single file in the dist folder. Every asset including icon/css is bundled in the js itself to avoid loading multiple files.
```
apexcharts/
├── dist/
│ └── apexcharts.min.js
├── src/
│ ├── assets/
│ ├── charts/
│ ├── modules/
│ ├── utils/
│ └── apexcharts.js
└── samples/
```
## Using it with IE11
If you need to make it work with IE11, you need to include these polyfills before including ApexCharts
- [promise-polyfill](https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js)
- [classlist.js](https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill)
- [ResizeObserver polyfill](https://cdn.jsdelivr.net/npm/@juggle/resize-observer)
- [findIndex](https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn) - You will need this only if you require timeline/rangebar charts
- [canvg](https://unpkg.com/canvg@3.0.4/lib/umd.js) - You will need this only if you require PNG download of your charts
## Development
#### Install dependencies and run project
```bash
npm install
npm run dev
```
This will start the webpack watch and any changes you make to `src` folder will auto-compile and output will be produced in the `dist` folder.
#### Minifying the src
```bash
npm run build
```
## Where do I go next?
Head over to the <a href="https://apexcharts.com/docs/">documentation</a> section to read more about how to use different kinds of charts and explore all options.
## Contacts
Email: <a href="info@apexcharts.com">info@apexcharts.com</a>
Twitter: <a href="https://twitter.com/apexcharts">@apexcharts</a>
Facebook: <a href="https://facebook.com/apexcharts">fb.com/apexcharts</a>
## Dependency
ApexCharts uses <a href="https://svgdotjs.github.io/" target="_blank">SVG.js</a> for drawing shapes, animations, applying svg filters and a lot more under the hood. The library is bundled in the final build file, so you don't need to include it.
## License
ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.

View File

@@ -1,106 +0,0 @@
{
"name": "apexcharts",
"version": "3.35.2",
"description": "A JavaScript Chart Library",
"repository": {
"type": "git",
"url": "https://github.com/apexcharts/apexcharts.js.git"
},
"main": "dist/apexcharts.common.js",
"unpkg": "dist/apexcharts.js",
"jsdelivr": "dist/apexcharts.js",
"typings": "types/apexcharts.d.ts",
"files": [
"src",
"dist/*.js",
"dist/*.css",
"dist/locales/*.json",
"types/*.d.ts"
],
"scripts": {
"dev": "rollup -w -c build/config.js --environment TARGET:web-umd-dev",
"dev:cjs": "rollup -w -c build/config.js --environment TARGET:web-cjs",
"bundle": "node build/build.js",
"build": "npm run bundle && webpack",
"build:umd": "rollup -w -c build/config.js --environment TARGET:web-umd-dev",
"build:amd": "webpack",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"test": "npm run e2e && npm run unit",
"unit": "jest tests/unit/",
"e2e": "node tests/e2e/samples.js test",
"e2e:update": "node tests/e2e/samples.js update",
"build:samples": "node samples/source/index.js generate"
},
"dependencies": {
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
"svg.filter.js": "^2.0.2",
"svg.pathmorphing.js": "^0.1.3",
"svg.resize.js": "^1.4.3",
"svg.select.js": "^3.0.1"
},
"devDependencies": {
"@babel/core": "^7.8.7",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.8.7",
"@rollup/plugin-babel": "^5.2.1",
"@rollup/plugin-json": "4.0.1",
"@rollup/plugin-node-resolve": "6.0.0",
"@rollup/plugin-replace": "2.3.0",
"@rollup/plugin-strip": "1.3.1",
"babel-eslint": "10.0.3",
"babel-jest": "27.3.1",
"babel-loader": "8.0.6",
"babel-plugin-istanbul": "6.0.0",
"chalk": "3.0.0",
"css-loader": "3.4.1",
"eslint": "8.2.0",
"eslint-config-prettier": "6.9.0",
"eslint-loader": "3.0.3",
"eslint-plugin-import": "2.19.1",
"eslint-plugin-prettier": "3.1.2",
"eslint-plugin-promise": "4.2.1",
"fs-extra": "8.1.0",
"jest": "27.3.1",
"nunjucks": "3.2.1",
"nyc": "15.0.0",
"pixelmatch": "5.1.0",
"pngjs": "3.4.0",
"postcss": "^8.3.11",
"prettier": "1.19.1",
"puppeteer": "2.0.0",
"puppeteer-cluster": "0.18.0",
"rollup": "2.56.0",
"rollup-plugin-babel": "4.4.0",
"rollup-plugin-copy-glob": "0.3.2",
"rollup-plugin-postcss": "4.0.1",
"rollup-plugin-svgo": "1.1.0",
"rollup-plugin-terser": "7.0.2",
"style-loader": "1.1.2",
"svg-inline-loader": "0.8.0",
"terser": "5.3.8",
"tslint": "5.12.1",
"typescript": "3.2.2",
"webpack": "5.3.2",
"webpack-bundle-analyzer": "3.9.0",
"webpack-cli": "4.9.1"
},
"bugs": {
"url": "https://github.com/apexcharts/apexcharts.js/issues"
},
"license": "MIT",
"licenses": [
{
"type": "MIT",
"url": "http://www.opensource.org/licenses/mit-license.php"
}
],
"homepage": "https://apexcharts.com",
"keywords": [
"charts",
"graphs",
"visualizations",
"data"
]
}

View File

@@ -1,762 +0,0 @@
import Annotations from './modules/annotations/Annotations'
import Base from './modules/Base'
import CoreUtils from './modules/CoreUtils'
import DataLabels from './modules/DataLabels'
import Defaults from './modules/settings/Defaults'
import Exports from './modules/Exports'
import Grid from './modules/axes/Grid'
import Markers from './modules/Markers'
import Range from './modules/Range'
import Utils from './utils/Utils'
import XAxis from './modules/axes/XAxis'
import YAxis from './modules/axes/YAxis'
import InitCtxVariables from './modules/helpers/InitCtxVariables'
import Destroy from './modules/helpers/Destroy'
import { addResizeListener, removeResizeListener } from './utils/Resize'
import apexCSS from './assets/apexcharts.css'
/**
*
* @module ApexCharts
**/
export default class ApexCharts {
constructor(el, opts) {
this.opts = opts
this.ctx = this
// Pass the user supplied options to the Base Class where these options will be extended with defaults. The returned object from Base Class will become the config object in the entire codebase.
this.w = new Base(opts).init()
this.el = el
this.w.globals.cuid = Utils.randomId()
this.w.globals.chartID = this.w.config.chart.id
? Utils.escapeString(this.w.config.chart.id)
: this.w.globals.cuid
const initCtx = new InitCtxVariables(this)
initCtx.initModules()
this.create = Utils.bind(this.create, this)
this.windowResizeHandler = this._windowResizeHandler.bind(this)
this.parentResizeHandler = this._parentResizeCallback.bind(this)
}
/**
* The primary method user will call to render the chart.
*/
render() {
// main method
return new Promise((resolve, reject) => {
// only draw chart, if element found
if (this.el !== null) {
if (typeof Apex._chartInstances === 'undefined') {
Apex._chartInstances = []
}
if (this.w.config.chart.id) {
Apex._chartInstances.push({
id: this.w.globals.chartID,
group: this.w.config.chart.group,
chart: this
})
}
// set the locale here
this.setLocale(this.w.config.chart.defaultLocale)
const beforeMount = this.w.config.chart.events.beforeMount
if (typeof beforeMount === 'function') {
beforeMount(this, this.w)
}
this.events.fireEvent('beforeMount', [this, this.w])
window.addEventListener('resize', this.windowResizeHandler)
addResizeListener(this.el.parentNode, this.parentResizeHandler)
// Add CSS if not already added
if (!this.css) {
let rootNode = this.el.getRootNode && this.el.getRootNode()
let inShadowRoot = Utils.is('ShadowRoot', rootNode)
let doc = this.el.ownerDocument
let globalCSS = doc.getElementById('apexcharts-css')
if (inShadowRoot || !globalCSS) {
this.css = document.createElement('style')
this.css.id = 'apexcharts-css'
this.css.textContent = apexCSS
if (inShadowRoot) {
// We are in Shadow DOM, add to shadow root
rootNode.prepend(this.css)
} else {
// Add to <head> of element's document
doc.head.appendChild(this.css)
}
}
}
let graphData = this.create(this.w.config.series, {})
if (!graphData) return resolve(this)
this.mount(graphData)
.then(() => {
if (typeof this.w.config.chart.events.mounted === 'function') {
this.w.config.chart.events.mounted(this, this.w)
}
this.events.fireEvent('mounted', [this, this.w])
resolve(graphData)
})
.catch((e) => {
reject(e)
// handle error in case no data or element not found
})
} else {
reject(new Error('Element not found'))
}
})
}
create(ser, opts) {
let w = this.w
const initCtx = new InitCtxVariables(this)
initCtx.initModules()
let gl = this.w.globals
gl.noData = false
gl.animationEnded = false
this.responsive.checkResponsiveConfig(opts)
if (w.config.xaxis.convertedCatToNumeric) {
const defaults = new Defaults(w.config)
defaults.convertCatToNumericXaxis(w.config, this.ctx)
}
if (this.el === null) {
gl.animationEnded = true
return null
}
this.core.setupElements()
if (w.config.chart.type === 'treemap') {
w.config.grid.show = false
w.config.yaxis[0].show = false
}
if (gl.svgWidth === 0) {
// if the element is hidden, skip drawing
gl.animationEnded = true
return null
}
const combo = CoreUtils.checkComboSeries(ser)
gl.comboCharts = combo.comboCharts
gl.comboBarCount = combo.comboBarCount
const allSeriesAreEmpty = ser.every((s) => s.data && s.data.length === 0)
if (ser.length === 0 || allSeriesAreEmpty) {
this.series.handleNoData()
}
this.events.setupEventHandlers()
// Handle the data inputted by user and set some of the global variables (for eg, if data is datetime / numeric / category). Don't calculate the range / min / max at this time
this.data.parseData(ser)
// this is a good time to set theme colors first
this.theme.init()
// as markers accepts array, we need to setup global markers for easier access
const markers = new Markers(this)
markers.setGlobalMarkerSize()
// labelFormatters should be called before dimensions as in dimensions we need text labels width
this.formatters.setLabelFormatters()
this.titleSubtitle.draw()
// legend is calculated here before coreCalculations because it affects the plottable area
// if there is some data to show or user collapsed all series, then proceed drawing legend
if (
!gl.noData ||
gl.collapsedSeries.length === gl.series.length ||
w.config.legend.showForSingleSeries
) {
this.legend.init()
}
// check whether in multiple series, all series share the same X
this.series.hasAllSeriesEqualX()
// coreCalculations will give the min/max range and yaxis/axis values. It should be called here to set series variable from config to globals
if (gl.axisCharts) {
this.core.coreCalculations()
if (w.config.xaxis.type !== 'category') {
// as we have minX and maxX values, determine the default DateTimeFormat for time series
this.formatters.setLabelFormatters()
}
this.ctx.toolbar.minX = w.globals.minX
this.ctx.toolbar.maxX = w.globals.maxX
}
// we need to generate yaxis for heatmap separately as we are not showing numerics there, but seriesNames. There are some tweaks which are required for heatmap to align labels correctly which are done in below function
// Also we need to do this before calculating Dimensions plotCoords() method of Dimensions
this.formatters.heatmapLabelFormatters()
// get the largest marker size which will be needed in dimensions calc
const coreUtils = new CoreUtils(this)
coreUtils.getLargestMarkerSize()
// We got plottable area here, next task would be to calculate axis areas
this.dimensions.plotCoords()
const xyRatios = this.core.xySettings()
this.grid.createGridMask()
const elGraph = this.core.plotChartType(ser, xyRatios)
const dataLabels = new DataLabels(this)
dataLabels.bringForward()
if (w.config.dataLabels.background.enabled) {
dataLabels.dataLabelsBackground()
}
// after all the drawing calculations, shift the graphical area (actual charts/bars) excluding legends
this.core.shiftGraphPosition()
const dim = {
plot: {
left: w.globals.translateX,
top: w.globals.translateY,
width: w.globals.gridWidth,
height: w.globals.gridHeight
}
}
return {
elGraph,
xyRatios,
elInner: w.globals.dom.elGraphical,
dimensions: dim
}
}
mount(graphData = null) {
let me = this
let w = me.w
return new Promise((resolve, reject) => {
// no data to display
if (me.el === null) {
return reject(
new Error('Not enough data to display or target element not found')
)
} else if (graphData === null || w.globals.allSeriesCollapsed) {
me.series.handleNoData()
}
if (w.config.chart.type !== 'treemap') {
me.axes.drawAxis(w.config.chart.type, graphData.xyRatios)
}
me.grid = new Grid(me)
let elgrid = me.grid.drawGrid()
me.annotations = new Annotations(me)
me.annotations.drawImageAnnos()
me.annotations.drawTextAnnos()
if (w.config.grid.position === 'back' && elgrid) {
w.globals.dom.elGraphical.add(elgrid.el)
}
let xAxis = new XAxis(this.ctx)
let yaxis = new YAxis(this.ctx)
if (elgrid !== null) {
xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)
yaxis.setYAxisTextAlignments()
w.config.yaxis.map((yaxe, index) => {
if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
yaxis.yAxisTitleRotate(index, yaxe.opposite)
}
})
}
if (w.config.annotations.position === 'back') {
w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
me.annotations.drawAxesAnnotations()
}
if (Array.isArray(graphData.elGraph)) {
for (let g = 0; g < graphData.elGraph.length; g++) {
w.globals.dom.elGraphical.add(graphData.elGraph[g])
}
} else {
w.globals.dom.elGraphical.add(graphData.elGraph)
}
if (w.config.grid.position === 'front' && elgrid) {
w.globals.dom.elGraphical.add(elgrid.el)
}
if (w.config.xaxis.crosshairs.position === 'front') {
me.crosshairs.drawXCrosshairs()
}
if (w.config.yaxis[0].crosshairs.position === 'front') {
me.crosshairs.drawYCrosshairs()
}
if (w.config.annotations.position === 'front') {
w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
me.annotations.drawAxesAnnotations()
}
if (!w.globals.noData) {
// draw tooltips at the end
if (w.config.tooltip.enabled && !w.globals.noData) {
me.w.globals.tooltip.drawTooltip(graphData.xyRatios)
}
if (
w.globals.axisCharts &&
(w.globals.isXNumeric ||
w.config.xaxis.convertedCatToNumeric ||
w.globals.isRangeBar)
) {
if (
w.config.chart.zoom.enabled ||
(w.config.chart.selection && w.config.chart.selection.enabled) ||
(w.config.chart.pan && w.config.chart.pan.enabled)
) {
me.zoomPanSelection.init({
xyRatios: graphData.xyRatios
})
}
} else {
const tools = w.config.chart.toolbar.tools
let toolsArr = [
'zoom',
'zoomin',
'zoomout',
'selection',
'pan',
'reset'
]
toolsArr.forEach((t) => {
tools[t] = false
})
}
if (w.config.chart.toolbar.show && !w.globals.allSeriesCollapsed) {
me.toolbar.createToolbar()
}
}
if (w.globals.memory.methodsToExec.length > 0) {
w.globals.memory.methodsToExec.forEach((fn) => {
fn.method(fn.params, false, fn.context)
})
}
if (!w.globals.axisCharts && !w.globals.noData) {
me.core.resizeNonAxisCharts()
}
resolve(me)
})
}
/**
* Destroy the chart instance by removing all elements which also clean up event listeners on those elements.
*/
destroy() {
window.removeEventListener('resize', this.windowResizeHandler)
removeResizeListener(this.el.parentNode, this.parentResizeHandler)
// remove the chart's instance from the global Apex._chartInstances
const chartID = this.w.config.chart.id
if (chartID) {
Apex._chartInstances.forEach((c, i) => {
if (c.id === Utils.escapeString(chartID)) {
Apex._chartInstances.splice(i, 1)
}
})
}
new Destroy(this.ctx).clear({ isUpdating: false })
}
/**
* Allows users to update Options after the chart has rendered.
*
* @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
*/
updateOptions(
options,
redraw = false,
animate = true,
updateSyncedCharts = true,
overwriteInitialConfig = true
) {
const w = this.w
// when called externally, clear some global variables
// fixes apexcharts.js#1488
w.globals.selection = undefined
if (options.series) {
this.series.resetSeries(false, true, false)
if (options.series.length && options.series[0].data) {
options.series = options.series.map((s, i) => {
return this.updateHelpers._extendSeries(s, i)
})
}
// user updated the series via updateOptions() function.
// Hence, we need to reset axis min/max to avoid zooming issues
this.updateHelpers.revertDefaultAxisMinMax()
}
// user has set x-axis min/max externally - hence we need to forcefully set the xaxis min/max
if (options.xaxis) {
options = this.updateHelpers.forceXAxisUpdate(options)
}
if (options.yaxis) {
options = this.updateHelpers.forceYAxisUpdate(options)
}
if (w.globals.collapsedSeriesIndices.length > 0) {
this.series.clearPreviousPaths()
}
/* update theme mode#459 */
if (options.theme) {
options = this.theme.updateThemeOptions(options)
}
return this.updateHelpers._updateOptions(
options,
redraw,
animate,
updateSyncedCharts,
overwriteInitialConfig
)
}
/**
* Allows users to update Series after the chart has rendered.
*
* @param {array} series - New series which will override the existing
*/
updateSeries(newSeries = [], animate = true, overwriteInitialSeries = true) {
this.series.resetSeries(false)
this.updateHelpers.revertDefaultAxisMinMax()
return this.updateHelpers._updateSeries(
newSeries,
animate,
overwriteInitialSeries
)
}
/**
* Allows users to append a new series after the chart has rendered.
*
* @param {array} newSerie - New serie which will be appended to the existing series
*/
appendSeries(newSerie, animate = true, overwriteInitialSeries = true) {
const newSeries = this.w.config.series.slice()
newSeries.push(newSerie)
this.series.resetSeries(false)
this.updateHelpers.revertDefaultAxisMinMax()
return this.updateHelpers._updateSeries(
newSeries,
animate,
overwriteInitialSeries
)
}
/**
* Allows users to append Data to series.
*
* @param {array} newData - New data in the same format as series
*/
appendData(newData, overwriteInitialSeries = true) {
let me = this
me.w.globals.dataChanged = true
me.series.getPreviousPaths()
let newSeries = me.w.config.series.slice()
for (let i = 0; i < newSeries.length; i++) {
if (newData[i] !== null && typeof newData[i] !== 'undefined') {
for (let j = 0; j < newData[i].data.length; j++) {
newSeries[i].data.push(newData[i].data[j])
}
}
}
me.w.config.series = newSeries
if (overwriteInitialSeries) {
me.w.globals.initialSeries = Utils.clone(me.w.config.series)
}
return this.update()
}
update(options) {
return new Promise((resolve, reject) => {
new Destroy(this.ctx).clear({ isUpdating: true })
const graphData = this.create(this.w.config.series, options)
if (!graphData) return resolve(this)
this.mount(graphData)
.then(() => {
if (typeof this.w.config.chart.events.updated === 'function') {
this.w.config.chart.events.updated(this, this.w)
}
this.events.fireEvent('updated', [this, this.w])
this.w.globals.isDirty = true
resolve(this)
})
.catch((e) => {
reject(e)
})
})
}
/**
* Get all charts in the same "group" (including the instance which is called upon) to sync them when user zooms in/out or pan.
*/
getSyncedCharts() {
const chartGroups = this.getGroupedCharts()
let allCharts = [this]
if (chartGroups.length) {
allCharts = []
chartGroups.forEach((ch) => {
allCharts.push(ch)
})
}
return allCharts
}
/**
* Get charts in the same "group" (excluding the instance which is called upon) to perform operations on the other charts of the same group (eg., tooltip hovering)
*/
getGroupedCharts() {
return Apex._chartInstances
.filter((ch) => {
if (ch.group) {
return true
}
})
.map((ch) => (this.w.config.chart.group === ch.group ? ch.chart : this))
}
static getChartByID(id) {
const chartId = Utils.escapeString(id)
const c = Apex._chartInstances.filter((ch) => ch.id === chartId)[0]
return c && c.chart
}
/**
* Allows the user to provide data attrs in the element and the chart will render automatically when this method is called by searching for the elements containing 'data-apexcharts' attribute
*/
static initOnLoad() {
const els = document.querySelectorAll('[data-apexcharts]')
for (let i = 0; i < els.length; i++) {
const el = els[i]
const options = JSON.parse(els[i].getAttribute('data-options'))
const apexChart = new ApexCharts(el, options)
apexChart.render()
}
}
/**
* This static method allows users to call chart methods without necessarily from the
* instance of the chart in case user has assigned chartID to the targeted chart.
* The chartID is used for mapping the instance stored in Apex._chartInstances global variable
*
* This is helpful in cases when you don't have reference of the chart instance
* easily and need to call the method from anywhere.
* For eg, in React/Vue applications when you have many parent/child components,
* and need easy reference to other charts for performing dynamic operations
*
* @param {string} chartID - The unique identifier which will be used to call methods
* on that chart instance
* @param {function} fn - The method name to call
* @param {object} opts - The parameters which are accepted in the original method will be passed here in the same order.
*/
static exec(chartID, fn, ...opts) {
const chart = this.getChartByID(chartID)
if (!chart) return
// turn on the global exec flag to indicate this method was called
chart.w.globals.isExecCalled = true
let ret = null
if (chart.publicMethods.indexOf(fn) !== -1) {
ret = chart[fn](...opts)
}
return ret
}
static merge(target, source) {
return Utils.extend(target, source)
}
toggleSeries(seriesName) {
return this.series.toggleSeries(seriesName)
}
highlightSeriesOnLegendHover(e, targetElement) {
return this.series.toggleSeriesOnHover(e, targetElement)
}
showSeries(seriesName) {
this.series.showSeries(seriesName)
}
hideSeries(seriesName) {
this.series.hideSeries(seriesName)
}
resetSeries(shouldUpdateChart = true, shouldResetZoom = true) {
this.series.resetSeries(shouldUpdateChart, shouldResetZoom)
}
// Public method to add event listener on chart context
addEventListener(name, handler) {
this.events.addEventListener(name, handler)
}
// Public method to remove event listener on chart context
removeEventListener(name, handler) {
this.events.removeEventListener(name, handler)
}
addXaxisAnnotation(opts, pushToMemory = true, context = undefined) {
let me = this
if (context) {
me = context
}
me.annotations.addXaxisAnnotationExternal(opts, pushToMemory, me)
}
addYaxisAnnotation(opts, pushToMemory = true, context = undefined) {
let me = this
if (context) {
me = context
}
me.annotations.addYaxisAnnotationExternal(opts, pushToMemory, me)
}
addPointAnnotation(opts, pushToMemory = true, context = undefined) {
let me = this
if (context) {
me = context
}
me.annotations.addPointAnnotationExternal(opts, pushToMemory, me)
}
clearAnnotations(context = undefined) {
let me = this
if (context) {
me = context
}
me.annotations.clearAnnotations(me)
}
removeAnnotation(id, context = undefined) {
let me = this
if (context) {
me = context
}
me.annotations.removeAnnotation(me, id)
}
getChartArea() {
const el = this.w.globals.dom.baseEl.querySelector('.apexcharts-inner')
return el
}
getSeriesTotalXRange(minX, maxX) {
return this.coreUtils.getSeriesTotalsXRange(minX, maxX)
}
getHighestValueInSeries(seriesIndex = 0) {
const range = new Range(this.ctx)
return range.getMinYMaxY(seriesIndex).highestY
}
getLowestValueInSeries(seriesIndex = 0) {
const range = new Range(this.ctx)
return range.getMinYMaxY(seriesIndex).lowestY
}
getSeriesTotal() {
return this.w.globals.seriesTotals
}
toggleDataPointSelection(seriesIndex, dataPointIndex) {
return this.updateHelpers.toggleDataPointSelection(
seriesIndex,
dataPointIndex
)
}
zoomX(min, max) {
this.ctx.toolbar.zoomUpdateOptions(min, max)
}
setLocale(localeName) {
this.localization.setCurrentLocaleValues(localeName)
}
dataURI(options) {
const exp = new Exports(this.ctx)
return exp.dataURI(options)
}
paper() {
return this.w.globals.dom.Paper
}
_parentResizeCallback() {
if (
this.w.globals.animationEnded &&
this.w.config.chart.redrawOnParentResize
) {
this._windowResize()
}
}
/**
* Handle window resize and re-draw the whole chart.
*/
_windowResize() {
clearTimeout(this.w.globals.resizeTimer)
this.w.globals.resizeTimer = window.setTimeout(() => {
this.w.globals.resized = true
this.w.globals.dataChanged = false
// we need to redraw the whole chart on window resize (with a small delay).
this.ctx.update()
}, 150)
}
_windowResizeHandler() {
let { redrawOnWindowResize: redraw } = this.w.config.chart
if (typeof redraw === 'function') {
redraw = redraw()
}
redraw && this._windowResize()
}
}

View File

@@ -1,688 +0,0 @@
.apexcharts-canvas {
position: relative;
user-select: none;
/* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
}
/* scrollbar is not visible by default for legend, hence forcing the visibility */
.apexcharts-canvas ::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
}
.apexcharts-canvas ::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.apexcharts-inner {
position: relative;
}
.apexcharts-text tspan {
font-family: inherit;
}
.legend-mouseover-inactive {
transition: 0.15s ease all;
opacity: 0.20;
}
.apexcharts-series-collapsed {
opacity: 0;
}
.apexcharts-tooltip {
border-radius: 5px;
box-shadow: 2px 2px 6px -4px #999;
cursor: default;
font-size: 14px;
left: 62px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
white-space: nowrap;
z-index: 12;
transition: 0.15s ease all;
}
.apexcharts-tooltip.apexcharts-active {
opacity: 1;
transition: 0.15s ease all;
}
.apexcharts-tooltip.apexcharts-theme-light {
border: 1px solid #e3e3e3;
background: rgba(255, 255, 255, 0.96);
}
.apexcharts-tooltip.apexcharts-theme-dark {
color: #fff;
background: rgba(30, 30, 30, 0.8);
}
.apexcharts-tooltip * {
font-family: inherit;
}
.apexcharts-tooltip-title {
padding: 6px;
font-size: 15px;
margin-bottom: 4px;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
background: #ECEFF1;
border-bottom: 1px solid #ddd;
}
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
background: rgba(0, 0, 0, 0.7);
border-bottom: 1px solid #333;
}
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-z-value {
display: inline-block;
font-weight: 600;
margin-left: 5px;
}
.apexcharts-tooltip-title:empty,
.apexcharts-tooltip-text-y-label:empty,
.apexcharts-tooltip-text-y-value:empty,
.apexcharts-tooltip-text-goals-label:empty,
.apexcharts-tooltip-text-goals-value:empty,
.apexcharts-tooltip-text-z-value:empty {
display: none;
}
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-z-value {
font-weight: 600;
}
.apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value {
padding: 6px 0 5px;
}
.apexcharts-tooltip-goals-group,
.apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value {
display: flex;
}
.apexcharts-tooltip-text-goals-label:not(:empty),
.apexcharts-tooltip-text-goals-value:not(:empty) {
margin-top: -6px;
}
.apexcharts-tooltip-marker {
width: 12px;
height: 12px;
position: relative;
top: 0px;
margin-right: 10px;
border-radius: 50%;
}
.apexcharts-tooltip-series-group {
padding: 0 10px;
display: none;
text-align: left;
justify-content: left;
align-items: center;
}
.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
opacity: 1;
}
.apexcharts-tooltip-series-group.apexcharts-active,
.apexcharts-tooltip-series-group:last-child {
padding-bottom: 4px;
}
.apexcharts-tooltip-series-group-hidden {
opacity: 0;
height: 0;
line-height: 0;
padding: 0 !important;
}
.apexcharts-tooltip-y-group {
padding: 6px 0 5px;
}
.apexcharts-tooltip-box, .apexcharts-custom-tooltip {
padding: 4px 8px;
}
.apexcharts-tooltip-boxPlot {
display: flex;
flex-direction: column-reverse;
}
.apexcharts-tooltip-box>div {
margin: 4px 0;
}
.apexcharts-tooltip-box span.value {
font-weight: bold;
}
.apexcharts-tooltip-rangebar {
padding: 5px 8px;
}
.apexcharts-tooltip-rangebar .category {
font-weight: 600;
color: #777;
}
.apexcharts-tooltip-rangebar .series-name {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
.apexcharts-xaxistooltip {
opacity: 0;
padding: 9px 10px;
pointer-events: none;
color: #373d3f;
font-size: 13px;
text-align: center;
border-radius: 2px;
position: absolute;
z-index: 10;
background: #ECEFF1;
border: 1px solid #90A4AE;
transition: 0.15s ease all;
}
.apexcharts-xaxistooltip.apexcharts-theme-dark {
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 0, 0, 0.5);
color: #fff;
}
.apexcharts-xaxistooltip:after,
.apexcharts-xaxistooltip:before {
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.apexcharts-xaxistooltip:after {
border-color: rgba(236, 239, 241, 0);
border-width: 6px;
margin-left: -6px;
}
.apexcharts-xaxistooltip:before {
border-color: rgba(144, 164, 174, 0);
border-width: 7px;
margin-left: -7px;
}
.apexcharts-xaxistooltip-bottom:after,
.apexcharts-xaxistooltip-bottom:before {
bottom: 100%;
}
.apexcharts-xaxistooltip-top:after,
.apexcharts-xaxistooltip-top:before {
top: 100%;
}
.apexcharts-xaxistooltip-bottom:after {
border-bottom-color: #ECEFF1;
}
.apexcharts-xaxistooltip-bottom:before {
border-bottom-color: #90A4AE;
}
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
border-bottom-color: rgba(0, 0, 0, 0.5);
}
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
}
.apexcharts-xaxistooltip-top:after {
border-top-color: #ECEFF1
}
.apexcharts-xaxistooltip-top:before {
border-top-color: #90A4AE;
}
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
border-top-color: rgba(0, 0, 0, 0.5);
}
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
border-top-color: rgba(0, 0, 0, 0.5);
}
.apexcharts-xaxistooltip.apexcharts-active {
opacity: 1;
transition: 0.15s ease all;
}
.apexcharts-yaxistooltip {
opacity: 0;
padding: 4px 10px;
pointer-events: none;
color: #373d3f;
font-size: 13px;
text-align: center;
border-radius: 2px;
position: absolute;
z-index: 10;
background: #ECEFF1;
border: 1px solid #90A4AE;
}
.apexcharts-yaxistooltip.apexcharts-theme-dark {
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 0, 0, 0.5);
color: #fff;
}
.apexcharts-yaxistooltip:after,
.apexcharts-yaxistooltip:before {
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.apexcharts-yaxistooltip:after {
border-color: rgba(236, 239, 241, 0);
border-width: 6px;
margin-top: -6px;
}
.apexcharts-yaxistooltip:before {
border-color: rgba(144, 164, 174, 0);
border-width: 7px;
margin-top: -7px;
}
.apexcharts-yaxistooltip-left:after,
.apexcharts-yaxistooltip-left:before {
left: 100%;
}
.apexcharts-yaxistooltip-right:after,
.apexcharts-yaxistooltip-right:before {
right: 100%;
}
.apexcharts-yaxistooltip-left:after {
border-left-color: #ECEFF1;
}
.apexcharts-yaxistooltip-left:before {
border-left-color: #90A4AE;
}
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
border-left-color: rgba(0, 0, 0, 0.5);
}
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
border-left-color: rgba(0, 0, 0, 0.5);
}
.apexcharts-yaxistooltip-right:after {
border-right-color: #ECEFF1;
}
.apexcharts-yaxistooltip-right:before {
border-right-color: #90A4AE;
}
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
border-right-color: rgba(0, 0, 0, 0.5);
}
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
border-right-color: rgba(0, 0, 0, 0.5);
}
.apexcharts-yaxistooltip.apexcharts-active {
opacity: 1;
}
.apexcharts-yaxistooltip-hidden {
display: none;
}
.apexcharts-xcrosshairs,
.apexcharts-ycrosshairs {
pointer-events: none;
opacity: 0;
transition: 0.15s ease all;
}
.apexcharts-xcrosshairs.apexcharts-active,
.apexcharts-ycrosshairs.apexcharts-active {
opacity: 1;
transition: 0.15s ease all;
}
.apexcharts-ycrosshairs-hidden {
opacity: 0;
}
.apexcharts-selection-rect {
cursor: move;
}
.svg_select_boundingRect, .svg_select_points_rot {
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.apexcharts-selection-rect + g .svg_select_boundingRect,
.apexcharts-selection-rect + g .svg_select_points_rot {
opacity: 0;
visibility: hidden;
}
.apexcharts-selection-rect + g .svg_select_points_l,
.apexcharts-selection-rect + g .svg_select_points_r {
cursor: ew-resize;
opacity: 1;
visibility: visible;
}
.svg_select_points {
fill: #efefef;
stroke: #333;
rx: 2;
}
.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
cursor: crosshair
}
.apexcharts-svg.apexcharts-zoomable.hovering-pan {
cursor: move
}
.apexcharts-zoom-icon,
.apexcharts-zoomin-icon,
.apexcharts-zoomout-icon,
.apexcharts-reset-icon,
.apexcharts-pan-icon,
.apexcharts-selection-icon,
.apexcharts-menu-icon,
.apexcharts-toolbar-custom-icon {
cursor: pointer;
width: 20px;
height: 20px;
line-height: 24px;
color: #6E8192;
text-align: center;
}
.apexcharts-zoom-icon svg,
.apexcharts-zoomin-icon svg,
.apexcharts-zoomout-icon svg,
.apexcharts-reset-icon svg,
.apexcharts-menu-icon svg {
fill: #6E8192;
}
.apexcharts-selection-icon svg {
fill: #444;
transform: scale(0.76)
}
.apexcharts-theme-dark .apexcharts-zoom-icon svg,
.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
.apexcharts-theme-dark .apexcharts-zoomout-icon svg,
.apexcharts-theme-dark .apexcharts-reset-icon svg,
.apexcharts-theme-dark .apexcharts-pan-icon svg,
.apexcharts-theme-dark .apexcharts-selection-icon svg,
.apexcharts-theme-dark .apexcharts-menu-icon svg,
.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
fill: #f3f4f5;
}
.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
fill: #008FFB;
}
.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
.apexcharts-theme-light .apexcharts-menu-icon:hover svg {
fill: #333;
}
.apexcharts-selection-icon,
.apexcharts-menu-icon {
position: relative;
}
.apexcharts-reset-icon {
margin-left: 5px;
}
.apexcharts-zoom-icon,
.apexcharts-reset-icon,
.apexcharts-menu-icon {
transform: scale(0.85);
}
.apexcharts-zoomin-icon,
.apexcharts-zoomout-icon {
transform: scale(0.7)
}
.apexcharts-zoomout-icon {
margin-right: 3px;
}
.apexcharts-pan-icon {
transform: scale(0.62);
position: relative;
left: 1px;
top: 0px;
}
.apexcharts-pan-icon svg {
fill: #fff;
stroke: #6E8192;
stroke-width: 2;
}
.apexcharts-pan-icon.apexcharts-selected svg {
stroke: #008FFB;
}
.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
stroke: #333;
}
.apexcharts-toolbar {
position: absolute;
z-index: 11;
max-width: 176px;
text-align: right;
border-radius: 3px;
padding: 0px 6px 2px 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
.apexcharts-menu {
background: #fff;
position: absolute;
top: 100%;
border: 1px solid #ddd;
border-radius: 3px;
padding: 3px;
right: 10px;
opacity: 0;
min-width: 110px;
transition: 0.15s ease all;
pointer-events: none;
}
.apexcharts-menu.apexcharts-menu-open {
opacity: 1;
pointer-events: all;
transition: 0.15s ease all;
}
.apexcharts-menu-item {
padding: 6px 7px;
font-size: 12px;
cursor: pointer;
}
.apexcharts-theme-light .apexcharts-menu-item:hover {
background: #eee;
}
.apexcharts-theme-dark .apexcharts-menu {
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
@media screen and (min-width: 768px) {
.apexcharts-canvas:hover .apexcharts-toolbar {
opacity: 1;
}
}
.apexcharts-datalabel.apexcharts-element-hidden {
opacity: 0;
}
.apexcharts-pie-label,
.apexcharts-datalabels,
.apexcharts-datalabel,
.apexcharts-datalabel-label,
.apexcharts-datalabel-value {
cursor: default;
pointer-events: none;
}
.apexcharts-pie-label-delay {
opacity: 0;
animation-name: opaque;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
.apexcharts-canvas .apexcharts-element-hidden {
opacity: 0;
}
.apexcharts-hide .apexcharts-series-points {
opacity: 0;
}
.apexcharts-gridline,
.apexcharts-annotation-rect,
.apexcharts-tooltip .apexcharts-marker,
.apexcharts-area-series .apexcharts-area,
.apexcharts-line,
.apexcharts-zoom-rect,
.apexcharts-toolbar svg,
.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
.apexcharts-radar-series path,
.apexcharts-radar-series polygon {
pointer-events: none;
}
/* markers */
.apexcharts-marker {
transition: 0.15s ease all;
}
@keyframes opaque {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Resize generated styles */
@keyframes resizeanim {
from {
opacity: 0;
}
to {
opacity: 0;
}
}
.resize-triggers {
animation: 1ms resizeanim;
visibility: hidden;
opacity: 0;
}
.resize-triggers,
.resize-triggers>div,
.contract-trigger:before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.resize-triggers>div {
background: #eee;
overflow: auto;
}
.contract-trigger:before {
width: 200%;
height: 200%;
}

View File

@@ -1,5 +0,0 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="3.2"/>
<path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 355 B

View File

@@ -1,4 +0,0 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 199 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

Before

Width:  |  Height:  |  Size: 185 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
<defs>
<path id="a" d="M0 0h24v24H0z"/>
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible"/>
</clipPath>
<path clip-path="url(#b)" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/>
</svg>

Before

Width:  |  Height:  |  Size: 416 B

View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>

Before

Width:  |  Height:  |  Size: 289 B

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
<defs>
<path d="M0 0h24v24H0z" id="a"/>
</defs>
<clipPath id="b">
<use overflow="visible" xlink:href="#a"/>
</clipPath>
<path clip-path="url(#b)" d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>
</svg>

Before

Width:  |  Height:  |  Size: 656 B

View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
<path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 269 B

View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 263 B

View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>

Before

Width:  |  Height:  |  Size: 308 B

View File

@@ -1,4 +0,0 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 366 B

View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
</svg>

Before

Width:  |  Height:  |  Size: 265 B

View File

@@ -1,4 +0,0 @@
<svg fill="#6E8192" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z"/>
</svg>

Before

Width:  |  Height:  |  Size: 439 B

View File

@@ -1,3 +0,0 @@
<svg stroke="#333" fill="none" height="24" viewBox="0 0 28 24" width="24" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="16" height="16" stroke-width="2.5" stroke-dasharray="4" stroke-dashoffset="2"></rect>
</svg>

Before

Width:  |  Height:  |  Size: 231 B

View File

@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>
</svg>

Before

Width:  |  Height:  |  Size: 450 B

View File

@@ -1,10 +0,0 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M0 0h24v24H0z" id="a"/>
</defs>
<clipPath id="b">
<use overflow="visible" xlink:href="#a"/>
</clipPath>
<path clip-path="url(#b)" d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6z"/>
<path clip-path="url(#b)" d="M0 0h24v24H0z" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 600 B

View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z"/>
</svg>

Before

Width:  |  Height:  |  Size: 301 B

View File

@@ -1,492 +0,0 @@
import BarDataLabels from './common/bar/DataLabels'
import BarHelpers from './common/bar/Helpers'
import CoreUtils from '../modules/CoreUtils'
import Utils from '../utils/Utils'
import Filters from '../modules/Filters'
import Graphics from '../modules/Graphics'
/**
* ApexCharts Bar Class responsible for drawing both Columns and Bars.
*
* @module Bar
**/
class Bar {
constructor(ctx, xyRatios) {
this.ctx = ctx
this.w = ctx.w
const w = this.w
this.barOptions = w.config.plotOptions.bar
this.isHorizontal = this.barOptions.horizontal
this.strokeWidth = w.config.stroke.width
this.isNullValue = false
this.isRangeBar = w.globals.seriesRangeBar.length && this.isHorizontal
this.xyRatios = xyRatios
if (this.xyRatios !== null) {
this.xRatio = xyRatios.xRatio
this.initialXRatio = xyRatios.initialXRatio
this.yRatio = xyRatios.yRatio
this.invertedXRatio = xyRatios.invertedXRatio
this.invertedYRatio = xyRatios.invertedYRatio
this.baseLineY = xyRatios.baseLineY
this.baseLineInvertedY = xyRatios.baseLineInvertedY
}
this.yaxisIndex = 0
this.seriesLen = 0
this.barHelpers = new BarHelpers(this)
}
/** primary draw method which is called on bar object
* @memberof Bar
* @param {array} series - user supplied series values
* @param {int} seriesIndex - the index by which series will be drawn on the svg
* @return {node} element which is supplied to parent chart draw method for appending
**/
draw(series, seriesIndex) {
let w = this.w
let graphics = new Graphics(this.ctx)
const coreUtils = new CoreUtils(this.ctx, w)
series = coreUtils.getLogSeries(series)
this.series = series
this.yRatio = coreUtils.getLogYRatios(this.yRatio)
this.barHelpers.initVariables(series)
let ret = graphics.group({
class: 'apexcharts-bar-series apexcharts-plot-series'
})
if (w.config.dataLabels.enabled) {
if (this.totalItems > this.barOptions.dataLabels.maxItems) {
console.warn(
'WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.'
)
}
}
for (let i = 0, bc = 0; i < series.length; i++, bc++) {
let x,
y,
xDivision, // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
yDivision, // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
zeroH, // zeroH is the baseline where 0 meets y axis
zeroW // zeroW is the baseline where 0 meets x axis
let yArrj = [] // hold y values of current iterating series
let xArrj = [] // hold x values of current iterating series
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
// el to which series will be drawn
let elSeries = graphics.group({
class: `apexcharts-series`,
rel: i + 1,
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]),
'data:realIndex': realIndex
})
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
if (series[i].length > 0) {
this.visibleI = this.visibleI + 1
}
let barHeight = 0
let barWidth = 0
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex
}
this.isReversed =
w.config.yaxis[this.yaxisIndex] &&
w.config.yaxis[this.yaxisIndex].reversed
let initPositions = this.barHelpers.initialPositions()
y = initPositions.y
barHeight = initPositions.barHeight
yDivision = initPositions.yDivision
zeroW = initPositions.zeroW
x = initPositions.x
barWidth = initPositions.barWidth
xDivision = initPositions.xDivision
zeroH = initPositions.zeroH
if (!this.horizontal) {
xArrj.push(x + barWidth / 2)
}
// eldatalabels
let elDataLabelsWrap = graphics.group({
class: 'apexcharts-datalabels',
'data:realIndex': realIndex
})
let elGoalsMarkers = graphics.group({
class: 'apexcharts-bar-goals-markers',
style: `pointer-events: none`
})
for (let j = 0; j < w.globals.dataPoints; j++) {
const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
let paths = null
const pathsParams = {
indexes: {
i,
j,
realIndex,
bc
},
x,
y,
strokeWidth,
elSeries
}
if (this.isHorizontal) {
paths = this.drawBarPaths({
...pathsParams,
barHeight,
zeroW,
yDivision
})
barWidth = this.series[i][j] / this.invertedYRatio
} else {
paths = this.drawColumnPaths({
...pathsParams,
xDivision,
barWidth,
zeroH
})
barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex]
}
const barGoalLine = this.barHelpers.drawGoalLine({
barXPosition: paths.barXPosition,
barYPosition: paths.barYPosition,
goalX: paths.goalX,
goalY: paths.goalY,
barHeight,
barWidth
})
if (barGoalLine) {
elGoalsMarkers.add(barGoalLine)
}
y = paths.y
x = paths.x
// push current X
if (j > 0) {
xArrj.push(x + barWidth / 2)
}
yArrj.push(y)
let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)
this.renderSeries({
realIndex,
pathFill,
j,
i,
pathFrom: paths.pathFrom,
pathTo: paths.pathTo,
strokeWidth,
elSeries,
x,
y,
series,
barHeight,
barWidth,
elDataLabelsWrap,
elGoalsMarkers,
visibleSeries: this.visibleI,
type: 'bar'
})
}
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = xArrj
w.globals.seriesYvalues[realIndex] = yArrj
ret.add(elSeries)
}
return ret
}
renderSeries({
realIndex,
pathFill,
lineFill,
j,
i,
pathFrom,
pathTo,
strokeWidth,
elSeries,
x,
y,
y1,
y2,
series,
barHeight,
barWidth,
barYPosition,
elDataLabelsWrap,
elGoalsMarkers,
visibleSeries,
type
}) {
const w = this.w
const graphics = new Graphics(this.ctx)
if (!lineFill) {
/* fix apexcharts#341 */
lineFill = this.barOptions.distributed
? w.globals.stroke.colors[j]
: w.globals.stroke.colors[realIndex]
}
if (w.config.series[i].data[j] && w.config.series[i].data[j].strokeColor) {
lineFill = w.config.series[i].data[j].strokeColor
}
if (this.isNullValue) {
pathFill = 'none'
}
let delay =
((j / w.config.chart.animations.animateGradually.delay) *
(w.config.chart.animations.speed / w.globals.dataPoints)) /
2.4
let renderedPath = graphics.renderPaths({
i,
j,
realIndex,
pathFrom,
pathTo,
stroke: lineFill,
strokeWidth,
strokeLineCap: w.config.stroke.lineCap,
fill: pathFill,
animationDelay: delay,
initialSpeed: w.config.chart.animations.speed,
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
className: `apexcharts-${type}-area`
})
renderedPath.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
const forecast = w.config.forecastDataPoints
if (forecast.count > 0) {
if (j >= w.globals.dataPoints - forecast.count) {
renderedPath.node.setAttribute('stroke-dasharray', forecast.dashArray)
renderedPath.node.setAttribute('stroke-width', forecast.strokeWidth)
renderedPath.node.setAttribute('fill-opacity', forecast.fillOpacity)
}
}
if (typeof y1 !== 'undefined' && typeof y2 !== 'undefined') {
renderedPath.attr('data-range-y1', y1)
renderedPath.attr('data-range-y2', y2)
}
const filters = new Filters(this.ctx)
filters.setSelectionFilter(renderedPath, realIndex, j)
elSeries.add(renderedPath)
let barDataLabels = new BarDataLabels(this)
let dataLabels = barDataLabels.handleBarDataLabels({
x,
y,
y1,
y2,
i,
j,
series,
realIndex,
barHeight,
barWidth,
barYPosition,
renderedPath,
visibleSeries
})
if (dataLabels !== null) {
elDataLabelsWrap.add(dataLabels)
}
elSeries.add(elDataLabelsWrap)
if (elGoalsMarkers) {
elSeries.add(elGoalsMarkers)
}
return elSeries
}
drawBarPaths({
indexes,
barHeight,
strokeWidth,
zeroW,
x,
y,
yDivision,
elSeries
}) {
let w = this.w
let i = indexes.i
let j = indexes.j
if (w.globals.isXNumeric) {
y =
(w.globals.seriesX[i][j] - w.globals.minX) / this.invertedXRatio -
barHeight
}
let barYPosition = y + barHeight * this.visibleI
x = this.barHelpers.getXForValue(this.series[i][j], zeroW)
const paths = this.barHelpers.getBarpaths({
barYPosition,
barHeight,
x1: zeroW,
x2: x,
strokeWidth,
series: this.series,
realIndex: indexes.realIndex,
i,
j,
w
})
if (!w.globals.isXNumeric) {
y = y + yDivision
}
this.barHelpers.barBackground({
j,
i,
y1: barYPosition - barHeight * this.visibleI,
y2: barHeight * this.seriesLen,
elSeries
})
return {
pathTo: paths.pathTo,
pathFrom: paths.pathFrom,
x,
y,
goalX: this.barHelpers.getGoalValues('x', zeroW, null, i, j),
barYPosition
}
}
drawColumnPaths({
indexes,
x,
y,
xDivision,
barWidth,
zeroH,
strokeWidth,
elSeries
}) {
let w = this.w
let realIndex = indexes.realIndex
let i = indexes.i
let j = indexes.j
let bc = indexes.bc
if (w.globals.isXNumeric) {
let sxI = realIndex
if (!w.globals.seriesX[realIndex].length) {
sxI = w.globals.maxValsInArrayIndex
}
x =
(w.globals.seriesX[sxI][j] - w.globals.minX) / this.xRatio -
(barWidth * this.seriesLen) / 2
}
let barXPosition = x + barWidth * this.visibleI
y = this.barHelpers.getYForValue(this.series[i][j], zeroH)
const paths = this.barHelpers.getColumnPaths({
barXPosition,
barWidth,
y1: zeroH,
y2: y,
strokeWidth,
series: this.series,
realIndex: indexes.realIndex,
i,
j,
w
})
if (!w.globals.isXNumeric) {
x = x + xDivision
}
this.barHelpers.barBackground({
bc,
j,
i,
x1: barXPosition - strokeWidth / 2 - barWidth * this.visibleI,
x2: barWidth * this.seriesLen + strokeWidth / 2,
elSeries
})
return {
pathTo: paths.pathTo,
pathFrom: paths.pathFrom,
x,
y,
goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j),
barXPosition
}
}
/** getPreviousPath is a common function for bars/columns which is used to get previous paths when data changes.
* @memberof Bar
* @param {int} realIndex - current iterating i
* @param {int} j - current iterating series's j index
* @return {string} pathFrom is the string which will be appended in animations
**/
getPreviousPath(realIndex, j) {
let w = this.w
let pathFrom
for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
let gpp = w.globals.previousPaths[pp]
if (
gpp.paths &&
gpp.paths.length > 0 &&
parseInt(gpp.realIndex, 10) === parseInt(realIndex, 10)
) {
if (typeof w.globals.previousPaths[pp].paths[j] !== 'undefined') {
pathFrom = w.globals.previousPaths[pp].paths[j].d
}
}
}
return pathFrom
}
}
export default Bar

View File

@@ -1,481 +0,0 @@
import CoreUtils from '../modules/CoreUtils'
import Bar from './Bar'
import Graphics from '../modules/Graphics'
import Utils from '../utils/Utils'
/**
* ApexCharts BarStacked Class responsible for drawing both Stacked Columns and Bars.
*
* @module BarStacked
* The whole calculation for stacked bar/column is different from normal bar/column,
* hence it makes sense to derive a new class for it extending most of the props of Parent Bar
**/
class BarStacked extends Bar {
draw(series, seriesIndex) {
let w = this.w
this.graphics = new Graphics(this.ctx)
this.bar = new Bar(this.ctx, this.xyRatios)
const coreUtils = new CoreUtils(this.ctx, w)
series = coreUtils.getLogSeries(series)
this.yRatio = coreUtils.getLogYRatios(this.yRatio)
this.barHelpers.initVariables(series)
if (w.config.chart.stackType === '100%') {
series = w.globals.seriesPercent.slice()
}
this.series = series
this.totalItems = 0
this.prevY = [] // y position on chart
this.prevX = [] // x position on chart
this.prevYF = [] // y position including shapes on chart
this.prevXF = [] // x position including shapes on chart
this.prevYVal = [] // y values (series[i][j]) in columns
this.prevXVal = [] // x values (series[i][j]) in bars
this.xArrj = [] // xj indicates x position on graph in bars
this.xArrjF = [] // xjF indicates bar's x position + roundedShape's positions in bars
this.xArrjVal = [] // x val means the actual series's y values in horizontal/bars
this.yArrj = [] // yj indicates y position on graph in columns
this.yArrjF = [] // yjF indicates bar's y position + roundedShape's positions in columns
this.yArrjVal = [] // y val means the actual series's y values in columns
for (let sl = 0; sl < series.length; sl++) {
if (series[sl].length > 0) {
this.totalItems += series[sl].length
}
}
let ret = this.graphics.group({
class: 'apexcharts-bar-series apexcharts-plot-series'
})
let x = 0
let y = 0
for (let i = 0, bc = 0; i < series.length; i++, bc++) {
let xDivision // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
let yDivision // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
let zeroH // zeroH is the baseline where 0 meets y axis
let zeroW // zeroW is the baseline where 0 meets x axis
let xArrValues = []
let yArrValues = []
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex
}
this.isReversed =
w.config.yaxis[this.yaxisIndex] &&
w.config.yaxis[this.yaxisIndex].reversed
// el to which series will be drawn
let elSeries = this.graphics.group({
class: `apexcharts-series`,
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]),
rel: i + 1,
'data:realIndex': realIndex
})
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
// eldatalabels
let elDataLabelsWrap = this.graphics.group({
class: 'apexcharts-datalabels',
'data:realIndex': realIndex
})
let barHeight = 0
let barWidth = 0
let initPositions = this.initialPositions(
x,
y,
xDivision,
yDivision,
zeroH,
zeroW
)
y = initPositions.y
barHeight = initPositions.barHeight
yDivision = initPositions.yDivision
zeroW = initPositions.zeroW
x = initPositions.x
barWidth = initPositions.barWidth
xDivision = initPositions.xDivision
zeroH = initPositions.zeroH
this.yArrj = []
this.yArrjF = []
this.yArrjVal = []
this.xArrj = []
this.xArrjF = []
this.xArrjVal = []
// if (!this.horizontal) {
// this.xArrj.push(x + barWidth / 2)
// }
// fix issue #1215;
// where all stack bar disappear after collapsing the first series
// sol: if only 1 arr in this.prevY(this.prevY.length === 1) and all are NaN
if (this.prevY.length === 1 && this.prevY[0].every((val) => isNaN(val))) {
// make this.prevY[0] all zeroH
this.prevY[0] = this.prevY[0].map((val) => zeroH)
// make this.prevYF[0] all 0
this.prevYF[0] = this.prevYF[0].map((val) => 0)
}
for (let j = 0; j < w.globals.dataPoints; j++) {
const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
const commonPathOpts = {
indexes: { i, j, realIndex, bc },
strokeWidth,
x,
y,
elSeries
}
let paths = null
if (this.isHorizontal) {
paths = this.drawStackedBarPaths({
...commonPathOpts,
zeroW,
barHeight,
yDivision
})
barWidth = this.series[i][j] / this.invertedYRatio
} else {
paths = this.drawStackedColumnPaths({
...commonPathOpts,
xDivision,
barWidth,
zeroH
})
barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex]
}
y = paths.y
x = paths.x
xArrValues.push(x)
yArrValues.push(y)
let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)
elSeries = this.renderSeries({
realIndex,
pathFill,
j,
i,
pathFrom: paths.pathFrom,
pathTo: paths.pathTo,
strokeWidth,
elSeries,
x,
y,
series,
barHeight,
barWidth,
elDataLabelsWrap,
type: 'bar',
visibleSeries: 0
})
}
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = xArrValues
w.globals.seriesYvalues[realIndex] = yArrValues
// push all current y values array to main PrevY Array
this.prevY.push(this.yArrj)
this.prevYF.push(this.yArrjF)
this.prevYVal.push(this.yArrjVal)
this.prevX.push(this.xArrj)
this.prevXF.push(this.xArrjF)
this.prevXVal.push(this.xArrjVal)
ret.add(elSeries)
}
return ret
}
initialPositions(x, y, xDivision, yDivision, zeroH, zeroW) {
let w = this.w
let barHeight, barWidth
if (this.isHorizontal) {
// height divided into equal parts
yDivision = w.globals.gridHeight / w.globals.dataPoints
barHeight = yDivision
barHeight =
(barHeight * parseInt(w.config.plotOptions.bar.barHeight, 10)) / 100
zeroW =
this.baseLineInvertedY +
w.globals.padHorizontal +
(this.isReversed ? w.globals.gridWidth : 0) -
(this.isReversed ? this.baseLineInvertedY * 2 : 0)
// initial y position is half of barHeight * half of number of Bars
y = (yDivision - barHeight) / 2
} else {
// width divided into equal parts
xDivision = w.globals.gridWidth / w.globals.dataPoints
barWidth = xDivision
if (w.globals.isXNumeric && w.globals.dataPoints > 1) {
// the check (w.globals.dataPoints > 1) fixes apexcharts.js #1617
xDivision = w.globals.minXDiff / this.xRatio
barWidth = (xDivision * parseInt(this.barOptions.columnWidth, 10)) / 100
} else {
barWidth =
(barWidth * parseInt(w.config.plotOptions.bar.columnWidth, 10)) / 100
}
zeroH =
this.baseLineY[this.yaxisIndex] +
(this.isReversed ? w.globals.gridHeight : 0) -
(this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0)
// initial x position is one third of barWidth
x = w.globals.padHorizontal + (xDivision - barWidth) / 2
}
return {
x,
y,
yDivision,
xDivision,
barHeight,
barWidth,
zeroH,
zeroW
}
}
drawStackedBarPaths({
indexes,
barHeight,
strokeWidth,
zeroW,
x,
y,
yDivision,
elSeries
}) {
let w = this.w
let barYPosition = y
let barXPosition
let i = indexes.i
let j = indexes.j
let prevBarW = 0
for (let k = 0; k < this.prevXF.length; k++) {
prevBarW = prevBarW + this.prevXF[k][j]
}
if (i > 0) {
let bXP = zeroW
if (this.prevXVal[i - 1][j] < 0) {
bXP =
this.series[i][j] >= 0
? this.prevX[i - 1][j] +
prevBarW -
(this.isReversed ? prevBarW : 0) * 2
: this.prevX[i - 1][j]
} else if (this.prevXVal[i - 1][j] >= 0) {
bXP =
this.series[i][j] >= 0
? this.prevX[i - 1][j]
: this.prevX[i - 1][j] -
prevBarW +
(this.isReversed ? prevBarW : 0) * 2
}
barXPosition = bXP
} else {
// the first series will not have prevX values
barXPosition = zeroW
}
if (this.series[i][j] === null) {
x = barXPosition
} else {
x =
barXPosition +
this.series[i][j] / this.invertedYRatio -
(this.isReversed ? this.series[i][j] / this.invertedYRatio : 0) * 2
}
const paths = this.barHelpers.getBarpaths({
barYPosition,
barHeight,
x1: barXPosition,
x2: x,
strokeWidth,
series: this.series,
realIndex: indexes.realIndex,
i,
j,
w
})
this.barHelpers.barBackground({
j,
i,
y1: barYPosition,
y2: barHeight,
elSeries
})
y = y + yDivision
return {
pathTo: paths.pathTo,
pathFrom: paths.pathFrom,
x,
y
}
}
drawStackedColumnPaths({
indexes,
x,
y,
xDivision,
barWidth,
zeroH,
strokeWidth,
elSeries
}) {
let w = this.w
let i = indexes.i
let j = indexes.j
let bc = indexes.bc
if (w.globals.isXNumeric) {
let seriesVal = w.globals.seriesX[i][j]
if (!seriesVal) seriesVal = 0
x = (seriesVal - w.globals.minX) / this.xRatio - barWidth / 2
}
let barXPosition = x
let barYPosition
let prevBarH = 0
for (let k = 0; k < this.prevYF.length; k++) {
// fix issue #1215
// in case where this.prevYF[k][j] is NaN, use 0 instead
prevBarH = prevBarH + (!isNaN(this.prevYF[k][j]) ? this.prevYF[k][j] : 0)
}
if (
(i > 0 && !w.globals.isXNumeric) ||
(i > 0 &&
w.globals.isXNumeric &&
w.globals.seriesX[i - 1][j] === w.globals.seriesX[i][j])
) {
let bYP
let prevYValue
const p = Math.min(this.yRatio.length + 1, i + 1)
if (this.prevY[i - 1] !== undefined) {
for (let ii = 1; ii < p; ii++) {
if (!isNaN(this.prevY[i - ii][j])) {
// find the previous available value to give prevYValue
prevYValue = this.prevY[i - ii][j]
// if found it, break the loop
break
}
}
}
for (let ii = 1; ii < p; ii++) {
// find the previous available value(non-NaN) to give bYP
if (this.prevYVal[i - ii][j] < 0) {
bYP =
this.series[i][j] >= 0
? prevYValue - prevBarH + (this.isReversed ? prevBarH : 0) * 2
: prevYValue
// found it? break the loop
break
} else if (this.prevYVal[i - ii][j] >= 0) {
bYP =
this.series[i][j] >= 0
? prevYValue
: prevYValue + prevBarH - (this.isReversed ? prevBarH : 0) * 2
// found it? break the loop
break
}
}
if (typeof bYP === 'undefined') bYP = w.globals.gridHeight
// if this.prevYF[0] is all 0 resulted from line #486
// AND every arr starting from the second only contains NaN
if (
this.prevYF[0].every((val) => val === 0) &&
this.prevYF.slice(1, i).every((arr) => arr.every((val) => isNaN(val)))
) {
// Use the same calc way as line #485
barYPosition = w.globals.gridHeight - zeroH
} else {
// Nothing special
barYPosition = bYP
}
} else {
// the first series will not have prevY values, also if the prev index's series X doesn't matches the current index's series X, then start from zero
barYPosition = w.globals.gridHeight - zeroH
}
y =
barYPosition -
this.series[i][j] / this.yRatio[this.yaxisIndex] +
(this.isReversed ? this.series[i][j] / this.yRatio[this.yaxisIndex] : 0) *
2
const paths = this.barHelpers.getColumnPaths({
barXPosition,
barWidth,
y1: barYPosition,
y2: y,
yRatio: this.yRatio[this.yaxisIndex],
strokeWidth: this.strokeWidth,
series: this.series,
realIndex: indexes.realIndex,
i,
j,
w
})
this.barHelpers.barBackground({
bc,
j,
i,
x1: barXPosition,
x2: barWidth,
elSeries
})
x = x + xDivision
return {
pathTo: paths.pathTo,
pathFrom: paths.pathFrom,
x: w.globals.isXNumeric ? x - xDivision : x,
y
}
}
}
export default BarStacked

View File

@@ -1,428 +0,0 @@
import CoreUtils from '../modules/CoreUtils'
import Bar from './Bar'
import Fill from '../modules/Fill'
import Graphics from '../modules/Graphics'
import Utils from '../utils/Utils'
/**
* ApexCharts BoxCandleStick Class responsible for drawing both Stacked Columns and Bars.
*
* @module BoxCandleStick
**/
class BoxCandleStick extends Bar {
draw(series, seriesIndex) {
let w = this.w
let graphics = new Graphics(this.ctx)
let fill = new Fill(this.ctx)
this.candlestickOptions = this.w.config.plotOptions.candlestick
this.boxOptions = this.w.config.plotOptions.boxPlot
this.isHorizontal = w.config.plotOptions.bar.horizontal
const coreUtils = new CoreUtils(this.ctx, w)
series = coreUtils.getLogSeries(series)
this.series = series
this.yRatio = coreUtils.getLogYRatios(this.yRatio)
this.barHelpers.initVariables(series)
let ret = graphics.group({
class: `apexcharts-${w.config.chart.type}-series apexcharts-plot-series`
})
for (let i = 0; i < series.length; i++) {
this.isBoxPlot =
w.config.chart.type === 'boxPlot' ||
w.config.series[i].type === 'boxPlot'
let x,
y,
xDivision, // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
yDivision, // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
zeroH, // zeroH is the baseline where 0 meets y axis
zeroW // zeroW is the baseline where 0 meets x axis
let yArrj = [] // hold y values of current iterating series
let xArrj = [] // hold x values of current iterating series
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
// el to which series will be drawn
let elSeries = graphics.group({
class: `apexcharts-series`,
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]),
rel: i + 1,
'data:realIndex': realIndex
})
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
if (series[i].length > 0) {
this.visibleI = this.visibleI + 1
}
let barHeight = 0
let barWidth = 0
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex
}
let initPositions = this.barHelpers.initialPositions()
y = initPositions.y
barHeight = initPositions.barHeight
yDivision = initPositions.yDivision
zeroW = initPositions.zeroW
x = initPositions.x
barWidth = initPositions.barWidth
xDivision = initPositions.xDivision
zeroH = initPositions.zeroH
xArrj.push(x + barWidth / 2)
// eldatalabels
let elDataLabelsWrap = graphics.group({
class: 'apexcharts-datalabels',
'data:realIndex': realIndex
})
for (let j = 0; j < w.globals.dataPoints; j++) {
const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
let paths = null
const pathsParams = {
indexes: {
i,
j,
realIndex
},
x,
y,
strokeWidth,
elSeries
}
if (this.isHorizontal) {
paths = this.drawHorizontalBoxPaths({
...pathsParams,
yDivision,
barHeight,
zeroW
})
} else {
paths = this.drawVerticalBoxPaths({
...pathsParams,
xDivision,
barWidth,
zeroH
})
}
y = paths.y
x = paths.x
// push current X
if (j > 0) {
xArrj.push(x + barWidth / 2)
}
yArrj.push(y)
paths.pathTo.forEach((pathTo, pi) => {
let lineFill =
!this.isBoxPlot && this.candlestickOptions.wick.useFillColor
? paths.color[pi]
: w.globals.stroke.colors[i]
let pathFill = fill.fillPath({
seriesNumber: realIndex,
dataPointIndex: j,
color: paths.color[pi],
value: series[i][j]
})
this.renderSeries({
realIndex,
pathFill,
lineFill,
j,
i,
pathFrom: paths.pathFrom,
pathTo,
strokeWidth,
elSeries,
x,
y,
series,
barHeight,
barWidth,
elDataLabelsWrap,
visibleSeries: this.visibleI,
type: w.config.chart.type
})
})
}
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = xArrj
w.globals.seriesYvalues[realIndex] = yArrj
ret.add(elSeries)
}
return ret
}
drawVerticalBoxPaths({
indexes,
x,
y,
xDivision,
barWidth,
zeroH,
strokeWidth
}) {
let w = this.w
let graphics = new Graphics(this.ctx)
let i = indexes.i
let j = indexes.j
let isPositive = true
let colorPos = w.config.plotOptions.candlestick.colors.upward
let colorNeg = w.config.plotOptions.candlestick.colors.downward
let color = ''
if (this.isBoxPlot) {
color = [this.boxOptions.colors.lower, this.boxOptions.colors.upper]
}
const yRatio = this.yRatio[this.yaxisIndex]
let realIndex = indexes.realIndex
const ohlc = this.getOHLCValue(realIndex, j)
let l1 = zeroH
let l2 = zeroH
if (ohlc.o > ohlc.c) {
isPositive = false
}
let y1 = Math.min(ohlc.o, ohlc.c)
let y2 = Math.max(ohlc.o, ohlc.c)
let m = ohlc.m
if (w.globals.isXNumeric) {
x =
(w.globals.seriesX[realIndex][j] - w.globals.minX) / this.xRatio -
barWidth / 2
}
let barXPosition = x + barWidth * this.visibleI
if (
typeof this.series[i][j] === 'undefined' ||
this.series[i][j] === null
) {
y1 = zeroH
y2 = zeroH
} else {
y1 = zeroH - y1 / yRatio
y2 = zeroH - y2 / yRatio
l1 = zeroH - ohlc.h / yRatio
l2 = zeroH - ohlc.l / yRatio
m = zeroH - ohlc.m / yRatio
}
let pathTo = graphics.move(barXPosition, zeroH)
let pathFrom = graphics.move(barXPosition + barWidth / 2, y1)
if (w.globals.previousPaths.length > 0) {
pathFrom = this.getPreviousPath(realIndex, j, true)
}
if (this.isBoxPlot) {
pathTo = [
graphics.move(barXPosition, y1) +
graphics.line(barXPosition + barWidth / 2, y1) +
graphics.line(barXPosition + barWidth / 2, l1) +
graphics.line(barXPosition + barWidth / 4, l1) +
graphics.line(barXPosition + barWidth - barWidth / 4, l1) +
graphics.line(barXPosition + barWidth / 2, l1) +
graphics.line(barXPosition + barWidth / 2, y1) +
graphics.line(barXPosition + barWidth, y1) +
graphics.line(barXPosition + barWidth, m) +
graphics.line(barXPosition, m) +
graphics.line(barXPosition, y1 + strokeWidth / 2),
graphics.move(barXPosition, m) +
graphics.line(barXPosition + barWidth, m) +
graphics.line(barXPosition + barWidth, y2) +
graphics.line(barXPosition + barWidth / 2, y2) +
graphics.line(barXPosition + barWidth / 2, l2) +
graphics.line(barXPosition + barWidth - barWidth / 4, l2) +
graphics.line(barXPosition + barWidth / 4, l2) +
graphics.line(barXPosition + barWidth / 2, l2) +
graphics.line(barXPosition + barWidth / 2, y2) +
graphics.line(barXPosition, y2) +
graphics.line(barXPosition, m) +
'z'
]
} else {
// candlestick
pathTo = [
graphics.move(barXPosition, y2) +
graphics.line(barXPosition + barWidth / 2, y2) +
graphics.line(barXPosition + barWidth / 2, l1) +
graphics.line(barXPosition + barWidth / 2, y2) +
graphics.line(barXPosition + barWidth, y2) +
graphics.line(barXPosition + barWidth, y1) +
graphics.line(barXPosition + barWidth / 2, y1) +
graphics.line(barXPosition + barWidth / 2, l2) +
graphics.line(barXPosition + barWidth / 2, y1) +
graphics.line(barXPosition, y1) +
graphics.line(barXPosition, y2 - strokeWidth / 2)
]
}
pathFrom = pathFrom + graphics.move(barXPosition, y1)
if (!w.globals.isXNumeric) {
x = x + xDivision
}
return {
pathTo,
pathFrom,
x,
y: y2,
barXPosition,
color: this.isBoxPlot ? color : isPositive ? [colorPos] : [colorNeg]
}
}
drawHorizontalBoxPaths({
indexes,
x,
y,
yDivision,
barHeight,
zeroW,
strokeWidth
}) {
let w = this.w
let graphics = new Graphics(this.ctx)
let i = indexes.i
let j = indexes.j
let color = this.boxOptions.colors.lower
if (this.isBoxPlot) {
color = [this.boxOptions.colors.lower, this.boxOptions.colors.upper]
}
const yRatio = this.invertedYRatio
let realIndex = indexes.realIndex
const ohlc = this.getOHLCValue(realIndex, j)
let l1 = zeroW
let l2 = zeroW
let x1 = Math.min(ohlc.o, ohlc.c)
let x2 = Math.max(ohlc.o, ohlc.c)
let m = ohlc.m
if (w.globals.isXNumeric) {
y =
(w.globals.seriesX[realIndex][j] - w.globals.minX) /
this.invertedXRatio -
barHeight / 2
}
let barYPosition = y + barHeight * this.visibleI
if (
typeof this.series[i][j] === 'undefined' ||
this.series[i][j] === null
) {
x1 = zeroW
x2 = zeroW
} else {
x1 = zeroW + x1 / yRatio
x2 = zeroW + x2 / yRatio
l1 = zeroW + ohlc.h / yRatio
l2 = zeroW + ohlc.l / yRatio
m = zeroW + ohlc.m / yRatio
}
let pathTo = graphics.move(zeroW, barYPosition)
let pathFrom = graphics.move(x1, barYPosition + barHeight / 2)
if (w.globals.previousPaths.length > 0) {
pathFrom = this.getPreviousPath(realIndex, j, true)
}
pathTo = [
graphics.move(x1, barYPosition) +
graphics.line(x1, barYPosition + barHeight / 2) +
graphics.line(l1, barYPosition + barHeight / 2) +
graphics.line(l1, barYPosition + barHeight / 2 - barHeight / 4) +
graphics.line(l1, barYPosition + barHeight / 2 + barHeight / 4) +
graphics.line(l1, barYPosition + barHeight / 2) +
graphics.line(x1, barYPosition + barHeight / 2) +
graphics.line(x1, barYPosition + barHeight) +
graphics.line(m, barYPosition + barHeight) +
graphics.line(m, barYPosition) +
graphics.line(x1 + strokeWidth / 2, barYPosition),
graphics.move(m, barYPosition) +
graphics.line(m, barYPosition + barHeight) +
graphics.line(x2, barYPosition + barHeight) +
graphics.line(x2, barYPosition + barHeight / 2) +
graphics.line(l2, barYPosition + barHeight / 2) +
graphics.line(l2, barYPosition + barHeight - barHeight / 4) +
graphics.line(l2, barYPosition + barHeight / 4) +
graphics.line(l2, barYPosition + barHeight / 2) +
graphics.line(x2, barYPosition + barHeight / 2) +
graphics.line(x2, barYPosition) +
graphics.line(m, barYPosition) +
'z'
]
pathFrom = pathFrom + graphics.move(x1, barYPosition)
if (!w.globals.isXNumeric) {
y = y + yDivision
}
return {
pathTo,
pathFrom,
x: x2,
y,
barYPosition,
color
}
}
getOHLCValue(i, j) {
const w = this.w
return {
o: this.isBoxPlot
? w.globals.seriesCandleH[i][j]
: w.globals.seriesCandleO[i][j],
h: this.isBoxPlot
? w.globals.seriesCandleO[i][j]
: w.globals.seriesCandleH[i][j],
m: w.globals.seriesCandleM[i][j],
l: this.isBoxPlot
? w.globals.seriesCandleC[i][j]
: w.globals.seriesCandleL[i][j],
c: this.isBoxPlot
? w.globals.seriesCandleL[i][j]
: w.globals.seriesCandleC[i][j]
}
}
}
export default BoxCandleStick

View File

@@ -1,241 +0,0 @@
import Animations from '../modules/Animations'
import Graphics from '../modules/Graphics'
import Fill from '../modules/Fill'
import Utils from '../utils/Utils'
import Helpers from './common/treemap/Helpers'
import Filters from '../modules/Filters'
/**
* ApexCharts HeatMap Class.
* @module HeatMap
**/
export default class HeatMap {
constructor(ctx, xyRatios) {
this.ctx = ctx
this.w = ctx.w
this.xRatio = xyRatios.xRatio
this.yRatio = xyRatios.yRatio
this.dynamicAnim = this.w.config.chart.animations.dynamicAnimation
this.helpers = new Helpers(ctx)
this.rectRadius = this.w.config.plotOptions.heatmap.radius
this.strokeWidth = this.w.config.stroke.show
? this.w.config.stroke.width
: 0
}
draw(series) {
let w = this.w
const graphics = new Graphics(this.ctx)
let ret = graphics.group({
class: 'apexcharts-heatmap'
})
ret.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
// width divided into equal parts
let xDivision = w.globals.gridWidth / w.globals.dataPoints
let yDivision = w.globals.gridHeight / w.globals.series.length
let y1 = 0
let rev = false
this.negRange = this.helpers.checkColorRange()
let heatSeries = series.slice()
if (w.config.yaxis[0].reversed) {
rev = true
heatSeries.reverse()
}
for (
let i = rev ? 0 : heatSeries.length - 1;
rev ? i < heatSeries.length : i >= 0;
rev ? i++ : i--
) {
// el to which series will be drawn
let elSeries = graphics.group({
class: `apexcharts-series apexcharts-heatmap-series`,
seriesName: Utils.escapeString(w.globals.seriesNames[i]),
rel: i + 1,
'data:realIndex': i
})
this.ctx.series.addCollapsedClassToSeries(elSeries, i)
if (w.config.chart.dropShadow.enabled) {
const shadow = w.config.chart.dropShadow
const filters = new Filters(this.ctx)
filters.dropShadow(elSeries, shadow, i)
}
let x1 = 0
let shadeIntensity = w.config.plotOptions.heatmap.shadeIntensity
for (let j = 0; j < heatSeries[i].length; j++) {
let heatColor = this.helpers.getShadeColor(
w.config.chart.type,
i,
j,
this.negRange
)
let color = heatColor.color
let heatColorProps = heatColor.colorProps
if (w.config.fill.type === 'image') {
const fill = new Fill(this.ctx)
color = fill.fillPath({
seriesNumber: i,
dataPointIndex: j,
opacity: w.globals.hasNegs
? heatColorProps.percent < 0
? 1 - (1 + heatColorProps.percent / 100)
: shadeIntensity + heatColorProps.percent / 100
: heatColorProps.percent / 100,
patternID: Utils.randomId(),
width: w.config.fill.image.width
? w.config.fill.image.width
: xDivision,
height: w.config.fill.image.height
? w.config.fill.image.height
: yDivision
})
}
let radius = this.rectRadius
let rect = graphics.drawRect(x1, y1, xDivision, yDivision, radius)
rect.attr({
cx: x1,
cy: y1
})
rect.node.classList.add('apexcharts-heatmap-rect')
elSeries.add(rect)
rect.attr({
fill: color,
i,
index: i,
j,
val: heatSeries[i][j],
'stroke-width': this.strokeWidth,
stroke: w.config.plotOptions.heatmap.useFillColorAsStroke
? color
: w.globals.stroke.colors[0],
color
})
this.helpers.addListeners(rect)
if (w.config.chart.animations.enabled && !w.globals.dataChanged) {
let speed = 1
if (!w.globals.resized) {
speed = w.config.chart.animations.speed
}
this.animateHeatMap(rect, x1, y1, xDivision, yDivision, speed)
}
if (w.globals.dataChanged) {
let speed = 1
if (this.dynamicAnim.enabled && w.globals.shouldAnimate) {
speed = this.dynamicAnim.speed
let colorFrom =
w.globals.previousPaths[i] &&
w.globals.previousPaths[i][j] &&
w.globals.previousPaths[i][j].color
if (!colorFrom) colorFrom = 'rgba(255, 255, 255, 0)'
this.animateHeatColor(
rect,
Utils.isColorHex(colorFrom)
? colorFrom
: Utils.rgb2hex(colorFrom),
Utils.isColorHex(color) ? color : Utils.rgb2hex(color),
speed
)
}
}
let formatter = w.config.dataLabels.formatter
let formattedText = formatter(w.globals.series[i][j], {
value: w.globals.series[i][j],
seriesIndex: i,
dataPointIndex: j,
w
})
let dataLabels = this.helpers.calculateDataLabels({
text: formattedText,
x: x1 + xDivision / 2,
y: y1 + yDivision / 2,
i,
j,
colorProps: heatColorProps,
series: heatSeries
})
if (dataLabels !== null) {
elSeries.add(dataLabels)
}
x1 = x1 + xDivision
}
y1 = y1 + yDivision
ret.add(elSeries)
}
// adjust yaxis labels for heatmap
let yAxisScale = w.globals.yAxisScale[0].result.slice()
if (w.config.yaxis[0].reversed) {
yAxisScale.unshift('')
} else {
yAxisScale.push('')
}
w.globals.yAxisScale[0].result = yAxisScale
let divisor = w.globals.gridHeight / w.globals.series.length
w.config.yaxis[0].labels.offsetY = -(divisor / 2)
return ret
}
animateHeatMap(el, x, y, width, height, speed) {
const animations = new Animations(this.ctx)
animations.animateRect(
el,
{
x: x + width / 2,
y: y + height / 2,
width: 0,
height: 0
},
{
x,
y,
width,
height
},
speed,
() => {
animations.animationCompleted(el)
}
)
}
animateHeatColor(el, colorFrom, colorTo, speed) {
el.attr({
fill: colorFrom
})
.animate(speed)
.attr({
fill: colorTo
})
}
}

View File

@@ -1,728 +0,0 @@
import CoreUtils from '../modules/CoreUtils'
import Graphics from '../modules/Graphics'
import Fill from '../modules/Fill'
import DataLabels from '../modules/DataLabels'
import Markers from '../modules/Markers'
import Scatter from './Scatter'
import Utils from '../utils/Utils'
import Helpers from './common/line/Helpers'
/**
* ApexCharts Line Class responsible for drawing Line / Area Charts.
* This class is also responsible for generating values for Bubble/Scatter charts, so need to rename it to Axis Charts to avoid confusions
* @module Line
**/
class Line {
constructor(ctx, xyRatios, isPointsChart) {
this.ctx = ctx
this.w = ctx.w
this.xyRatios = xyRatios
this.pointsChart =
!(
this.w.config.chart.type !== 'bubble' &&
this.w.config.chart.type !== 'scatter'
) || isPointsChart
this.scatter = new Scatter(this.ctx)
this.noNegatives = this.w.globals.minX === Number.MAX_VALUE
this.lineHelpers = new Helpers(this)
this.markers = new Markers(this.ctx)
this.prevSeriesY = []
this.categoryAxisCorrection = 0
this.yaxisIndex = 0
}
draw(series, ptype, seriesIndex) {
let w = this.w
let graphics = new Graphics(this.ctx)
let type = w.globals.comboCharts ? ptype : w.config.chart.type
let ret = graphics.group({
class: `apexcharts-${type}-series apexcharts-plot-series`
})
const coreUtils = new CoreUtils(this.ctx, w)
this.yRatio = this.xyRatios.yRatio
this.zRatio = this.xyRatios.zRatio
this.xRatio = this.xyRatios.xRatio
this.baseLineY = this.xyRatios.baseLineY
series = coreUtils.getLogSeries(series)
this.yRatio = coreUtils.getLogYRatios(this.yRatio)
// push all series in an array, so we can draw in reverse order (for stacked charts)
let allSeries = []
for (let i = 0; i < series.length; i++) {
series = this.lineHelpers.sameValueSeriesFix(i, series)
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
this._initSerieVariables(series, i, realIndex)
let yArrj = [] // hold y values of current iterating series
let xArrj = [] // hold x values of current iterating series
let x = w.globals.padHorizontal + this.categoryAxisCorrection
let y = 1
let linePaths = []
let areaPaths = []
this.ctx.series.addCollapsedClassToSeries(this.elSeries, realIndex)
if (w.globals.isXNumeric && w.globals.seriesX.length > 0) {
x = (w.globals.seriesX[realIndex][0] - w.globals.minX) / this.xRatio
}
xArrj.push(x)
let pX = x
let pY
let prevX = pX
let prevY = this.zeroY
let lineYPosition = 0
// the first value in the current series is not null or undefined
let firstPrevY = this.lineHelpers.determineFirstPrevY({
i,
series,
prevY,
lineYPosition
})
prevY = firstPrevY.prevY
yArrj.push(prevY)
pY = prevY
let pathsFrom = this._calculatePathsFrom({
series,
i,
realIndex,
prevX,
prevY
})
let paths = this._iterateOverDataPoints({
series,
realIndex,
i,
x,
y,
pX,
pY,
pathsFrom,
linePaths,
areaPaths,
seriesIndex,
lineYPosition,
xArrj,
yArrj
})
this._handlePaths({ type, realIndex, i, paths })
this.elSeries.add(this.elPointsMain)
this.elSeries.add(this.elDataLabelsWrap)
allSeries.push(this.elSeries)
}
if (w.config.chart.stacked) {
for (let s = allSeries.length; s > 0; s--) {
ret.add(allSeries[s - 1])
}
} else {
for (let s = 0; s < allSeries.length; s++) {
ret.add(allSeries[s])
}
}
return ret
}
_initSerieVariables(series, i, realIndex) {
const w = this.w
const graphics = new Graphics(this.ctx)
// width divided into equal parts
this.xDivision =
w.globals.gridWidth /
(w.globals.dataPoints - (w.config.xaxis.tickPlacement === 'on' ? 1 : 0))
this.strokeWidth = Array.isArray(w.config.stroke.width)
? w.config.stroke.width[realIndex]
: w.config.stroke.width
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex
}
this.isReversed =
w.config.yaxis[this.yaxisIndex] &&
w.config.yaxis[this.yaxisIndex].reversed
// zeroY is the 0 value in y series which can be used in negative charts
this.zeroY =
w.globals.gridHeight -
this.baseLineY[this.yaxisIndex] -
(this.isReversed ? w.globals.gridHeight : 0) +
(this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0)
this.areaBottomY = this.zeroY
if (
this.zeroY > w.globals.gridHeight ||
w.config.plotOptions.area.fillTo === 'end'
) {
this.areaBottomY = w.globals.gridHeight
}
this.categoryAxisCorrection = this.xDivision / 2
// el to which series will be drawn
this.elSeries = graphics.group({
class: `apexcharts-series`,
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex])
})
// points
this.elPointsMain = graphics.group({
class: 'apexcharts-series-markers-wrap',
'data:realIndex': realIndex
})
// eldatalabels
this.elDataLabelsWrap = graphics.group({
class: 'apexcharts-datalabels',
'data:realIndex': realIndex
})
let longestSeries = series[i].length === w.globals.dataPoints
this.elSeries.attr({
'data:longestSeries': longestSeries,
rel: i + 1,
'data:realIndex': realIndex
})
this.appendPathFrom = true
}
_calculatePathsFrom({ series, i, realIndex, prevX, prevY }) {
const w = this.w
const graphics = new Graphics(this.ctx)
let linePath, areaPath, pathFromLine, pathFromArea
if (series[i][0] === null) {
// when the first value itself is null, we need to move the pointer to a location where a null value is not found
for (let s = 0; s < series[i].length; s++) {
if (series[i][s] !== null) {
prevX = this.xDivision * s
prevY = this.zeroY - series[i][s] / this.yRatio[this.yaxisIndex]
linePath = graphics.move(prevX, prevY)
areaPath = graphics.move(prevX, this.areaBottomY)
break
}
}
} else {
linePath = graphics.move(prevX, prevY)
areaPath =
graphics.move(prevX, this.areaBottomY) + graphics.line(prevX, prevY)
}
pathFromLine = graphics.move(-1, this.zeroY) + graphics.line(-1, this.zeroY)
pathFromArea = graphics.move(-1, this.zeroY) + graphics.line(-1, this.zeroY)
if (w.globals.previousPaths.length > 0) {
const pathFrom = this.lineHelpers.checkPreviousPaths({
pathFromLine,
pathFromArea,
realIndex
})
pathFromLine = pathFrom.pathFromLine
pathFromArea = pathFrom.pathFromArea
}
return {
prevX,
prevY,
linePath,
areaPath,
pathFromLine,
pathFromArea
}
}
_handlePaths({ type, realIndex, i, paths }) {
const w = this.w
const graphics = new Graphics(this.ctx)
const fill = new Fill(this.ctx)
// push all current y values array to main PrevY Array
this.prevSeriesY.push(paths.yArrj)
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = paths.xArrj
w.globals.seriesYvalues[realIndex] = paths.yArrj
const forecast = w.config.forecastDataPoints
if (forecast.count > 0) {
const forecastCutoff =
w.globals.seriesXvalues[realIndex][
w.globals.seriesXvalues[realIndex].length - forecast.count - 1
]
const elForecastMask = graphics.drawRect(
forecastCutoff,
0,
w.globals.gridWidth,
w.globals.gridHeight,
0
)
w.globals.dom.elForecastMask.appendChild(elForecastMask.node)
const elNonForecastMask = graphics.drawRect(
0,
0,
forecastCutoff,
w.globals.gridHeight,
0
)
w.globals.dom.elNonForecastMask.appendChild(elNonForecastMask.node)
}
// these elements will be shown after area path animation completes
if (!this.pointsChart) {
w.globals.delayedElements.push({
el: this.elPointsMain.node,
index: realIndex
})
}
const defaultRenderedPathOptions = {
i,
realIndex,
animationDelay: i,
initialSpeed: w.config.chart.animations.speed,
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
className: `apexcharts-${type}`
}
if (type === 'area') {
let pathFill = fill.fillPath({
seriesNumber: realIndex
})
for (let p = 0; p < paths.areaPaths.length; p++) {
let renderedPath = graphics.renderPaths({
...defaultRenderedPathOptions,
pathFrom: paths.pathFromArea,
pathTo: paths.areaPaths[p],
stroke: 'none',
strokeWidth: 0,
strokeLineCap: null,
fill: pathFill
})
this.elSeries.add(renderedPath)
}
}
if (w.config.stroke.show && !this.pointsChart) {
let lineFill = null
if (type === 'line') {
lineFill = fill.fillPath({
seriesNumber: realIndex,
i
})
} else {
if (w.config.stroke.fill.type === 'solid') {
lineFill = w.globals.stroke.colors[realIndex]
} else {
const prevFill = w.config.fill
w.config.fill = w.config.stroke.fill
lineFill = fill.fillPath({
seriesNumber: realIndex,
i
})
w.config.fill = prevFill
}
}
for (let p = 0; p < paths.linePaths.length; p++) {
const linePathCommonOpts = {
...defaultRenderedPathOptions,
pathFrom: paths.pathFromLine,
pathTo: paths.linePaths[p],
stroke: lineFill,
strokeWidth: this.strokeWidth,
strokeLineCap: w.config.stroke.lineCap,
fill: 'none'
}
let renderedPath = graphics.renderPaths(linePathCommonOpts)
this.elSeries.add(renderedPath)
if (forecast.count > 0) {
let renderedForecastPath = graphics.renderPaths(linePathCommonOpts)
renderedForecastPath.node.setAttribute(
'stroke-dasharray',
forecast.dashArray
)
if (forecast.strokeWidth) {
renderedForecastPath.node.setAttribute(
'stroke-width',
forecast.strokeWidth
)
}
this.elSeries.add(renderedForecastPath)
renderedForecastPath.attr(
'clip-path',
`url(#forecastMask${w.globals.cuid})`
)
renderedPath.attr(
'clip-path',
`url(#nonForecastMask${w.globals.cuid})`
)
}
}
}
}
_iterateOverDataPoints({
series,
realIndex,
i,
x,
y,
pX,
pY,
pathsFrom,
linePaths,
areaPaths,
seriesIndex,
lineYPosition,
xArrj,
yArrj
}) {
const w = this.w
let graphics = new Graphics(this.ctx)
let yRatio = this.yRatio
let { prevY, linePath, areaPath, pathFromLine, pathFromArea } = pathsFrom
const minY = Utils.isNumber(w.globals.minYArr[realIndex])
? w.globals.minYArr[realIndex]
: w.globals.minY
const iterations =
w.globals.dataPoints > 1 ? w.globals.dataPoints - 1 : w.globals.dataPoints
for (let j = 0; j < iterations; j++) {
const isNull =
typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null
if (w.globals.isXNumeric) {
let sX = w.globals.seriesX[realIndex][j + 1]
if (typeof w.globals.seriesX[realIndex][j + 1] === 'undefined') {
/* fix #374 */
sX = w.globals.seriesX[realIndex][iterations - 1]
}
x = (sX - w.globals.minX) / this.xRatio
} else {
x = x + this.xDivision
}
if (w.config.chart.stacked) {
if (
i > 0 &&
w.globals.collapsedSeries.length < w.config.series.length - 1
) {
// a collapsed series in a stacked bar chart may provide wrong result for the next series, hence find the prevIndex of prev series which is not collapsed - fixes apexcharts.js#1372
const prevIndex = (pi) => {
let pii = pi
for (let cpi = 0; cpi < w.globals.series.length; cpi++) {
if (w.globals.collapsedSeriesIndices.indexOf(pi) > -1) {
pii--
break
}
}
return pii >= 0 ? pii : 0
}
lineYPosition = this.prevSeriesY[prevIndex(i - 1)][j + 1]
} else {
// the first series will not have prevY values
lineYPosition = this.zeroY
}
} else {
lineYPosition = this.zeroY
}
if (isNull) {
y =
lineYPosition -
minY / yRatio[this.yaxisIndex] +
(this.isReversed ? minY / yRatio[this.yaxisIndex] : 0) * 2
} else {
y =
lineYPosition -
series[i][j + 1] / yRatio[this.yaxisIndex] +
(this.isReversed ? series[i][j + 1] / yRatio[this.yaxisIndex] : 0) * 2
}
// push current X
xArrj.push(x)
// push current Y that will be used as next series's bottom position
yArrj.push(y)
let pointsPos = this.lineHelpers.calculatePoints({
series,
x,
y,
realIndex,
i,
j,
prevY
})
let calculatedPaths = this._createPaths({
series,
i,
realIndex,
j,
x,
y,
pX,
pY,
linePath,
areaPath,
linePaths,
areaPaths,
seriesIndex
})
areaPaths = calculatedPaths.areaPaths
linePaths = calculatedPaths.linePaths
pX = calculatedPaths.pX
pY = calculatedPaths.pY
areaPath = calculatedPaths.areaPath
linePath = calculatedPaths.linePath
if (this.appendPathFrom) {
pathFromLine = pathFromLine + graphics.line(x, this.zeroY)
pathFromArea = pathFromArea + graphics.line(x, this.zeroY)
}
this.handleNullDataPoints(series, pointsPos, i, j, realIndex)
this._handleMarkersAndLabels({
pointsPos,
series,
x,
y,
prevY,
i,
j,
realIndex
})
}
return {
yArrj,
xArrj,
pathFromArea,
areaPaths,
pathFromLine,
linePaths
}
}
_handleMarkersAndLabels({ pointsPos, series, x, y, prevY, i, j, realIndex }) {
const w = this.w
let dataLabels = new DataLabels(this.ctx)
if (!this.pointsChart) {
if (w.globals.series[i].length > 1) {
this.elPointsMain.node.classList.add('apexcharts-element-hidden')
}
let elPointsWrap = this.markers.plotChartMarkers(
pointsPos,
realIndex,
j + 1
)
if (elPointsWrap !== null) {
this.elPointsMain.add(elPointsWrap)
}
} else {
// scatter / bubble chart points creation
this.scatter.draw(this.elSeries, j, {
realIndex,
pointsPos,
zRatio: this.zRatio,
elParent: this.elPointsMain
})
}
let drawnLabels = dataLabels.drawDataLabel(
pointsPos,
realIndex,
j + 1,
null
)
if (drawnLabels !== null) {
this.elDataLabelsWrap.add(drawnLabels)
}
}
_createPaths({
series,
i,
realIndex,
j,
x,
y,
pX,
pY,
linePath,
areaPath,
linePaths,
areaPaths,
seriesIndex
}) {
let w = this.w
let graphics = new Graphics(this.ctx)
let curve = w.config.stroke.curve
const areaBottomY = this.areaBottomY
if (Array.isArray(w.config.stroke.curve)) {
if (Array.isArray(seriesIndex)) {
curve = w.config.stroke.curve[seriesIndex[i]]
} else {
curve = w.config.stroke.curve[i]
}
}
// logic of smooth curve derived from chartist
// CREDITS: https://gionkunz.github.io/chartist-js/
if (curve === 'smooth') {
let length = (x - pX) * 0.35
if (w.globals.hasNullValues) {
if (series[i][j] !== null) {
if (series[i][j + 1] !== null) {
linePath =
graphics.move(pX, pY) +
graphics.curve(pX + length, pY, x - length, y, x + 1, y)
areaPath =
graphics.move(pX + 1, pY) +
graphics.curve(pX + length, pY, x - length, y, x + 1, y) +
graphics.line(x, areaBottomY) +
graphics.line(pX, areaBottomY) +
'z'
} else {
linePath = graphics.move(pX, pY)
areaPath = graphics.move(pX, pY) + 'z'
}
}
linePaths.push(linePath)
areaPaths.push(areaPath)
} else {
linePath =
linePath + graphics.curve(pX + length, pY, x - length, y, x, y)
areaPath =
areaPath + graphics.curve(pX + length, pY, x - length, y, x, y)
}
pX = x
pY = y
if (j === series[i].length - 2) {
// last loop, close path
areaPath =
areaPath +
graphics.curve(pX, pY, x, y, x, areaBottomY) +
graphics.move(x, y) +
'z'
if (!w.globals.hasNullValues) {
linePaths.push(linePath)
areaPaths.push(areaPath)
}
}
} else {
if (series[i][j + 1] === null) {
linePath = linePath + graphics.move(x, y)
const numericOrCatX = w.globals.isXNumeric
? (w.globals.seriesX[realIndex][j] - w.globals.minX) / this.xRatio
: x - this.xDivision
areaPath =
areaPath +
graphics.line(numericOrCatX, areaBottomY) +
graphics.move(x, y) +
'z'
}
if (series[i][j] === null) {
linePath = linePath + graphics.move(x, y)
areaPath = areaPath + graphics.move(x, areaBottomY)
}
if (curve === 'stepline') {
linePath =
linePath + graphics.line(x, null, 'H') + graphics.line(null, y, 'V')
areaPath =
areaPath + graphics.line(x, null, 'H') + graphics.line(null, y, 'V')
} else if (curve === 'straight') {
linePath = linePath + graphics.line(x, y)
areaPath = areaPath + graphics.line(x, y)
}
if (j === series[i].length - 2) {
// last loop, close path
areaPath =
areaPath + graphics.line(x, areaBottomY) + graphics.move(x, y) + 'z'
linePaths.push(linePath)
areaPaths.push(areaPath)
}
}
return {
linePaths,
areaPaths,
pX,
pY,
linePath,
areaPath
}
}
handleNullDataPoints(series, pointsPos, i, j, realIndex) {
const w = this.w
if (
(series[i][j] === null && w.config.markers.showNullDataPoints) ||
series[i].length === 1
) {
// fixes apexcharts.js#1282, #1252
let elPointsWrap = this.markers.plotChartMarkers(
pointsPos,
realIndex,
j + 1,
this.strokeWidth - w.config.markers.strokeWidth / 2,
true
)
if (elPointsWrap !== null) {
this.elPointsMain.add(elPointsWrap)
}
}
}
}
export default Line

File diff suppressed because it is too large Load Diff

View File

@@ -1,524 +0,0 @@
import Fill from '../modules/Fill'
import Graphics from '../modules/Graphics'
import Markers from '../modules/Markers'
import DataLabels from '../modules/DataLabels'
import Filters from '../modules/Filters'
import Utils from '../utils/Utils'
import Helpers from './common/circle/Helpers'
import CoreUtils from '../modules/CoreUtils'
/**
* ApexCharts Radar Class for Spider/Radar Charts.
* @module Radar
**/
class Radar {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.chartType = this.w.config.chart.type
this.initialAnim = this.w.config.chart.animations.enabled
this.dynamicAnim =
this.initialAnim &&
this.w.config.chart.animations.dynamicAnimation.enabled
this.animDur = 0
const w = this.w
this.graphics = new Graphics(this.ctx)
this.lineColorArr =
w.globals.stroke.colors !== undefined
? w.globals.stroke.colors
: w.globals.colors
this.defaultSize =
w.globals.svgHeight < w.globals.svgWidth
? w.globals.gridHeight + w.globals.goldenPadding * 1.5
: w.globals.gridWidth
this.isLog = w.config.yaxis[0].logarithmic
this.coreUtils = new CoreUtils(this.ctx)
this.maxValue = this.isLog
? this.coreUtils.getLogVal(w.globals.maxY, 0)
: w.globals.maxY
this.minValue = this.isLog
? this.coreUtils.getLogVal(this.w.globals.minY, 0)
: w.globals.minY
this.polygons = w.config.plotOptions.radar.polygons
this.strokeWidth = w.config.stroke.show ? w.config.stroke.width : 0
this.size =
this.defaultSize / 2.1 - this.strokeWidth - w.config.chart.dropShadow.blur
if (w.config.xaxis.labels.show) {
this.size = this.size - w.globals.xAxisLabelsWidth / 1.75
}
if (w.config.plotOptions.radar.size !== undefined) {
this.size = w.config.plotOptions.radar.size
}
this.dataRadiusOfPercent = []
this.dataRadius = []
this.angleArr = []
this.yaxisLabelsTextsPos = []
}
draw(series) {
let w = this.w
const fill = new Fill(this.ctx)
const allSeries = []
const dataLabels = new DataLabels(this.ctx)
if (series.length) {
this.dataPointsLen = series[w.globals.maxValsInArrayIndex].length
}
this.disAngle = (Math.PI * 2) / this.dataPointsLen
let halfW = w.globals.gridWidth / 2
let halfH = w.globals.gridHeight / 2
let translateX = halfW + w.config.plotOptions.radar.offsetX
let translateY = halfH + w.config.plotOptions.radar.offsetY
let ret = this.graphics.group({
class: 'apexcharts-radar-series apexcharts-plot-series',
transform: `translate(${translateX || 0}, ${translateY || 0})`
})
let dataPointsPos = []
let elPointsMain = null
let elDataPointsMain = null
this.yaxisLabels = this.graphics.group({
class: 'apexcharts-yaxis'
})
series.forEach((s, i) => {
let longestSeries = s.length === w.globals.dataPoints
// el to which series will be drawn
let elSeries = this.graphics.group().attr({
class: `apexcharts-series`,
'data:longestSeries': longestSeries,
seriesName: Utils.escapeString(w.globals.seriesNames[i]),
rel: i + 1,
'data:realIndex': i
})
this.dataRadiusOfPercent[i] = []
this.dataRadius[i] = []
this.angleArr[i] = []
s.forEach((dv, j) => {
const range = Math.abs(this.maxValue - this.minValue)
dv = dv + Math.abs(this.minValue)
if (this.isLog) {
dv = this.coreUtils.getLogVal(dv, 0)
}
this.dataRadiusOfPercent[i][j] = dv / range
this.dataRadius[i][j] = this.dataRadiusOfPercent[i][j] * this.size
this.angleArr[i][j] = j * this.disAngle
})
dataPointsPos = this.getDataPointsPos(
this.dataRadius[i],
this.angleArr[i]
)
const paths = this.createPaths(dataPointsPos, {
x: 0,
y: 0
})
// points
elPointsMain = this.graphics.group({
class: 'apexcharts-series-markers-wrap apexcharts-element-hidden'
})
// datapoints
elDataPointsMain = this.graphics.group({
class: `apexcharts-datalabels`,
'data:realIndex': i
})
w.globals.delayedElements.push({
el: elPointsMain.node,
index: i
})
const defaultRenderedPathOptions = {
i,
realIndex: i,
animationDelay: i,
initialSpeed: w.config.chart.animations.speed,
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
className: `apexcharts-radar`,
shouldClipToGrid: false,
bindEventsOnPaths: false,
stroke: w.globals.stroke.colors[i],
strokeLineCap: w.config.stroke.lineCap
}
let pathFrom = null
if (w.globals.previousPaths.length > 0) {
pathFrom = this.getPreviousPath(i)
}
for (let p = 0; p < paths.linePathsTo.length; p++) {
let renderedLinePath = this.graphics.renderPaths({
...defaultRenderedPathOptions,
pathFrom: pathFrom === null ? paths.linePathsFrom[p] : pathFrom,
pathTo: paths.linePathsTo[p],
strokeWidth: Array.isArray(this.strokeWidth)
? this.strokeWidth[i]
: this.strokeWidth,
fill: 'none',
drawShadow: false
})
elSeries.add(renderedLinePath)
let pathFill = fill.fillPath({
seriesNumber: i
})
let renderedAreaPath = this.graphics.renderPaths({
...defaultRenderedPathOptions,
pathFrom: pathFrom === null ? paths.areaPathsFrom[p] : pathFrom,
pathTo: paths.areaPathsTo[p],
strokeWidth: 0,
fill: pathFill,
drawShadow: false
})
if (w.config.chart.dropShadow.enabled) {
const filters = new Filters(this.ctx)
const shadow = w.config.chart.dropShadow
filters.dropShadow(
renderedAreaPath,
Object.assign({}, shadow, { noUserSpaceOnUse: true }),
i
)
}
elSeries.add(renderedAreaPath)
}
s.forEach((sj, j) => {
let markers = new Markers(this.ctx)
let opts = markers.getMarkerConfig({
cssClass: 'apexcharts-marker',
seriesIndex: i,
dataPointIndex: j
})
let point = this.graphics.drawMarker(
dataPointsPos[j].x,
dataPointsPos[j].y,
opts
)
point.attr('rel', j)
point.attr('j', j)
point.attr('index', i)
point.node.setAttribute('default-marker-size', opts.pSize)
let elPointsWrap = this.graphics.group({
class: 'apexcharts-series-markers'
})
if (elPointsWrap) {
elPointsWrap.add(point)
}
elPointsMain.add(elPointsWrap)
elSeries.add(elPointsMain)
const dataLabelsConfig = w.config.dataLabels
if (dataLabelsConfig.enabled) {
let text = dataLabelsConfig.formatter(w.globals.series[i][j], {
seriesIndex: i,
dataPointIndex: j,
w
})
dataLabels.plotDataLabelsText({
x: dataPointsPos[j].x,
y: dataPointsPos[j].y,
text,
textAnchor: 'middle',
i,
j: i,
parent: elDataPointsMain,
offsetCorrection: false,
dataLabelsConfig: {
...dataLabelsConfig
}
})
}
elSeries.add(elDataPointsMain)
})
allSeries.push(elSeries)
})
this.drawPolygons({
parent: ret
})
if (w.config.xaxis.labels.show) {
const xaxisTexts = this.drawXAxisTexts()
ret.add(xaxisTexts)
}
allSeries.forEach((elS) => {
ret.add(elS)
})
ret.add(this.yaxisLabels)
return ret
}
drawPolygons(opts) {
const w = this.w
const { parent } = opts
const helpers = new Helpers(this.ctx)
const yaxisTexts = w.globals.yAxisScale[0].result.reverse()
const layers = yaxisTexts.length
let radiusSizes = []
let layerDis = this.size / (layers - 1)
for (let i = 0; i < layers; i++) {
radiusSizes[i] = layerDis * i
}
radiusSizes.reverse()
let polygonStrings = []
let lines = []
radiusSizes.forEach((radiusSize, r) => {
const polygon = Utils.getPolygonPos(radiusSize, this.dataPointsLen)
let string = ''
polygon.forEach((p, i) => {
if (r === 0) {
const line = this.graphics.drawLine(
p.x,
p.y,
0,
0,
Array.isArray(this.polygons.connectorColors)
? this.polygons.connectorColors[i]
: this.polygons.connectorColors
)
lines.push(line)
}
if (i === 0) {
this.yaxisLabelsTextsPos.push({
x: p.x,
y: p.y
})
}
string += p.x + ',' + p.y + ' '
})
polygonStrings.push(string)
})
polygonStrings.forEach((p, i) => {
const strokeColors = this.polygons.strokeColors
const strokeWidth = this.polygons.strokeWidth
const polygon = this.graphics.drawPolygon(
p,
Array.isArray(strokeColors) ? strokeColors[i] : strokeColors,
Array.isArray(strokeWidth) ? strokeWidth[i] : strokeWidth,
w.globals.radarPolygons.fill.colors[i]
)
parent.add(polygon)
})
lines.forEach((l) => {
parent.add(l)
})
if (w.config.yaxis[0].show) {
this.yaxisLabelsTextsPos.forEach((p, i) => {
const yText = helpers.drawYAxisTexts(p.x, p.y, i, yaxisTexts[i])
this.yaxisLabels.add(yText)
})
}
}
drawXAxisTexts() {
const w = this.w
const xaxisLabelsConfig = w.config.xaxis.labels
let elXAxisWrap = this.graphics.group({
class: 'apexcharts-xaxis'
})
let polygonPos = Utils.getPolygonPos(this.size, this.dataPointsLen)
w.globals.labels.forEach((label, i) => {
let formatter = w.config.xaxis.labels.formatter
let dataLabels = new DataLabels(this.ctx)
if (polygonPos[i]) {
let textPos = this.getTextPos(polygonPos[i], this.size)
let text = formatter(label, {
seriesIndex: -1,
dataPointIndex: i,
w
})
dataLabels.plotDataLabelsText({
x: textPos.newX,
y: textPos.newY,
text,
textAnchor: textPos.textAnchor,
i,
j: i,
parent: elXAxisWrap,
color:
Array.isArray(xaxisLabelsConfig.style.colors) &&
xaxisLabelsConfig.style.colors[i]
? xaxisLabelsConfig.style.colors[i]
: '#a8a8a8',
dataLabelsConfig: {
textAnchor: textPos.textAnchor,
dropShadow: { enabled: false },
...xaxisLabelsConfig
},
offsetCorrection: false
})
}
})
return elXAxisWrap
}
createPaths(pos, origin) {
let linePathsTo = []
let linePathsFrom = []
let areaPathsTo = []
let areaPathsFrom = []
if (pos.length) {
linePathsFrom = [this.graphics.move(origin.x, origin.y)]
areaPathsFrom = [this.graphics.move(origin.x, origin.y)]
let linePathTo = this.graphics.move(pos[0].x, pos[0].y)
let areaPathTo = this.graphics.move(pos[0].x, pos[0].y)
pos.forEach((p, i) => {
linePathTo += this.graphics.line(p.x, p.y)
areaPathTo += this.graphics.line(p.x, p.y)
if (i === pos.length - 1) {
linePathTo += 'Z'
areaPathTo += 'Z'
}
})
linePathsTo.push(linePathTo)
areaPathsTo.push(areaPathTo)
}
return {
linePathsFrom,
linePathsTo,
areaPathsFrom,
areaPathsTo
}
}
getTextPos(pos, polygonSize) {
let limit = 10
let textAnchor = 'middle'
let newX = pos.x
let newY = pos.y
if (Math.abs(pos.x) >= limit) {
if (pos.x > 0) {
textAnchor = 'start'
newX += 10
} else if (pos.x < 0) {
textAnchor = 'end'
newX -= 10
}
} else {
textAnchor = 'middle'
}
if (Math.abs(pos.y) >= polygonSize - limit) {
if (pos.y < 0) {
newY -= 10
} else if (pos.y > 0) {
newY += 10
}
}
return {
textAnchor,
newX,
newY
}
}
getPreviousPath(realIndex) {
let w = this.w
let pathFrom = null
for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
let gpp = w.globals.previousPaths[pp]
if (
gpp.paths.length > 0 &&
parseInt(gpp.realIndex, 10) === parseInt(realIndex, 10)
) {
if (typeof w.globals.previousPaths[pp].paths[0] !== 'undefined') {
pathFrom = w.globals.previousPaths[pp].paths[0].d
}
}
}
return pathFrom
}
getDataPointsPos(
dataRadiusArr,
angleArr,
dataPointsLen = this.dataPointsLen
) {
dataRadiusArr = dataRadiusArr || []
angleArr = angleArr || []
let dataPointsPosArray = []
for (let j = 0; j < dataPointsLen; j++) {
let curPointPos = {}
curPointPos.x = dataRadiusArr[j] * Math.sin(angleArr[j])
curPointPos.y = -dataRadiusArr[j] * Math.cos(angleArr[j])
dataPointsPosArray.push(curPointPos)
}
return dataPointsPosArray
}
}
export default Radar

View File

@@ -1,469 +0,0 @@
import Pie from './Pie'
import Utils from '../utils/Utils'
import Fill from '../modules/Fill'
import Graphics from '../modules/Graphics'
import Filters from '../modules/Filters'
/**
* ApexCharts Radial Class for drawing Circle / Semi Circle Charts.
* @module Radial
**/
class Radial extends Pie {
constructor(ctx) {
super(ctx)
this.ctx = ctx
this.w = ctx.w
this.animBeginArr = [0]
this.animDur = 0
const w = this.w
this.startAngle = w.config.plotOptions.radialBar.startAngle
this.endAngle = w.config.plotOptions.radialBar.endAngle
this.totalAngle = Math.abs(
w.config.plotOptions.radialBar.endAngle -
w.config.plotOptions.radialBar.startAngle
)
this.trackStartAngle = w.config.plotOptions.radialBar.track.startAngle
this.trackEndAngle = w.config.plotOptions.radialBar.track.endAngle
this.donutDataLabels = this.w.config.plotOptions.radialBar.dataLabels
this.radialDataLabels = this.donutDataLabels // make a copy for easy reference
if (!this.trackStartAngle) this.trackStartAngle = this.startAngle
if (!this.trackEndAngle) this.trackEndAngle = this.endAngle
if (this.endAngle === 360) this.endAngle = 359.99
this.margin = parseInt(w.config.plotOptions.radialBar.track.margin, 10)
}
draw(series) {
let w = this.w
const graphics = new Graphics(this.ctx)
let ret = graphics.group({
class: 'apexcharts-radialbar'
})
if (w.globals.noData) return ret
let elSeries = graphics.group()
let centerY = this.defaultSize / 2
let centerX = w.globals.gridWidth / 2
let size = this.defaultSize / 2.05
if (!w.config.chart.sparkline.enabled) {
size = size - w.config.stroke.width - w.config.chart.dropShadow.blur
}
let colorArr = w.globals.fill.colors
if (w.config.plotOptions.radialBar.track.show) {
let elTracks = this.drawTracks({
size,
centerX,
centerY,
colorArr,
series
})
elSeries.add(elTracks)
}
let elG = this.drawArcs({
size,
centerX,
centerY,
colorArr,
series
})
let totalAngle = 360
if (w.config.plotOptions.radialBar.startAngle < 0) {
totalAngle = this.totalAngle
}
let angleRatio = (360 - totalAngle) / 360
w.globals.radialSize = size - size * angleRatio
if (this.radialDataLabels.value.show) {
let offset = Math.max(
this.radialDataLabels.value.offsetY,
this.radialDataLabels.name.offsetY
)
w.globals.radialSize += offset * angleRatio
}
elSeries.add(elG.g)
if (w.config.plotOptions.radialBar.hollow.position === 'front') {
elG.g.add(elG.elHollow)
if (elG.dataLabels) {
elG.g.add(elG.dataLabels)
}
}
ret.add(elSeries)
return ret
}
drawTracks(opts) {
let w = this.w
const graphics = new Graphics(this.ctx)
let g = graphics.group({
class: 'apexcharts-tracks'
})
let filters = new Filters(this.ctx)
let fill = new Fill(this.ctx)
let strokeWidth = this.getStrokeWidth(opts)
opts.size = opts.size - strokeWidth / 2
for (let i = 0; i < opts.series.length; i++) {
let elRadialBarTrack = graphics.group({
class: 'apexcharts-radialbar-track apexcharts-track'
})
g.add(elRadialBarTrack)
elRadialBarTrack.attr({
rel: i + 1
})
opts.size = opts.size - strokeWidth - this.margin
const trackConfig = w.config.plotOptions.radialBar.track
let pathFill = fill.fillPath({
seriesNumber: 0,
size: opts.size,
fillColors: Array.isArray(trackConfig.background)
? trackConfig.background[i]
: trackConfig.background,
solid: true
})
let startAngle = this.trackStartAngle
let endAngle = this.trackEndAngle
if (Math.abs(endAngle) + Math.abs(startAngle) >= 360)
endAngle = 360 - Math.abs(this.startAngle) - 0.1
let elPath = graphics.drawPath({
d: '',
stroke: pathFill,
strokeWidth:
(strokeWidth * parseInt(trackConfig.strokeWidth, 10)) / 100,
fill: 'none',
strokeOpacity: trackConfig.opacity,
classes: 'apexcharts-radialbar-area'
})
if (trackConfig.dropShadow.enabled) {
const shadow = trackConfig.dropShadow
filters.dropShadow(elPath, shadow)
}
elRadialBarTrack.add(elPath)
elPath.attr('id', 'apexcharts-radialbarTrack-' + i)
this.animatePaths(elPath, {
centerX: opts.centerX,
centerY: opts.centerY,
endAngle,
startAngle,
size: opts.size,
i,
totalItems: 2,
animBeginArr: 0,
dur: 0,
isTrack: true,
easing: w.globals.easing
})
}
return g
}
drawArcs(opts) {
let w = this.w
// size, donutSize, centerX, centerY, colorArr, lineColorArr, sectorAngleArr, series
let graphics = new Graphics(this.ctx)
let fill = new Fill(this.ctx)
let filters = new Filters(this.ctx)
let g = graphics.group()
let strokeWidth = this.getStrokeWidth(opts)
opts.size = opts.size - strokeWidth / 2
let hollowFillID = w.config.plotOptions.radialBar.hollow.background
let hollowSize =
opts.size -
strokeWidth * opts.series.length -
this.margin * opts.series.length -
(strokeWidth *
parseInt(w.config.plotOptions.radialBar.track.strokeWidth, 10)) /
100 /
2
let hollowRadius = hollowSize - w.config.plotOptions.radialBar.hollow.margin
if (w.config.plotOptions.radialBar.hollow.image !== undefined) {
hollowFillID = this.drawHollowImage(opts, g, hollowSize, hollowFillID)
}
let elHollow = this.drawHollow({
size: hollowRadius,
centerX: opts.centerX,
centerY: opts.centerY,
fill: hollowFillID ? hollowFillID : 'transparent'
})
if (w.config.plotOptions.radialBar.hollow.dropShadow.enabled) {
const shadow = w.config.plotOptions.radialBar.hollow.dropShadow
filters.dropShadow(elHollow, shadow)
}
let shown = 1
if (!this.radialDataLabels.total.show && w.globals.series.length > 1) {
shown = 0
}
let dataLabels = null
if (this.radialDataLabels.show) {
dataLabels = this.renderInnerDataLabels(this.radialDataLabels, {
hollowSize,
centerX: opts.centerX,
centerY: opts.centerY,
opacity: shown
})
}
if (w.config.plotOptions.radialBar.hollow.position === 'back') {
g.add(elHollow)
if (dataLabels) {
g.add(dataLabels)
}
}
let reverseLoop = false
if (w.config.plotOptions.radialBar.inverseOrder) {
reverseLoop = true
}
for (
let i = reverseLoop ? opts.series.length - 1 : 0;
reverseLoop ? i >= 0 : i < opts.series.length;
reverseLoop ? i-- : i++
) {
let elRadialBarArc = graphics.group({
class: `apexcharts-series apexcharts-radial-series`,
seriesName: Utils.escapeString(w.globals.seriesNames[i])
})
g.add(elRadialBarArc)
elRadialBarArc.attr({
rel: i + 1,
'data:realIndex': i
})
this.ctx.series.addCollapsedClassToSeries(elRadialBarArc, i)
opts.size = opts.size - strokeWidth - this.margin
let pathFill = fill.fillPath({
seriesNumber: i,
size: opts.size,
value: opts.series[i]
})
let startAngle = this.startAngle
let prevStartAngle
// if data exceeds 100, make it 100
const dataValue =
Utils.negToZero(opts.series[i] > 100 ? 100 : opts.series[i]) / 100
let endAngle = Math.round(this.totalAngle * dataValue) + this.startAngle
let prevEndAngle
if (w.globals.dataChanged) {
prevStartAngle = this.startAngle
prevEndAngle =
Math.round(
(this.totalAngle * Utils.negToZero(w.globals.previousPaths[i])) /
100
) + prevStartAngle
}
const currFullAngle = Math.abs(endAngle) + Math.abs(startAngle)
if (currFullAngle >= 360) {
endAngle = endAngle - 0.01
}
const prevFullAngle = Math.abs(prevEndAngle) + Math.abs(prevStartAngle)
if (prevFullAngle >= 360) {
prevEndAngle = prevEndAngle - 0.01
}
let angle = endAngle - startAngle
const dashArray = Array.isArray(w.config.stroke.dashArray)
? w.config.stroke.dashArray[i]
: w.config.stroke.dashArray
let elPath = graphics.drawPath({
d: '',
stroke: pathFill,
strokeWidth,
fill: 'none',
fillOpacity: w.config.fill.opacity,
classes: 'apexcharts-radialbar-area apexcharts-radialbar-slice-' + i,
strokeDashArray: dashArray
})
Graphics.setAttrs(elPath.node, {
'data:angle': angle,
'data:value': opts.series[i]
})
if (w.config.chart.dropShadow.enabled) {
const shadow = w.config.chart.dropShadow
filters.dropShadow(elPath, shadow, i)
}
filters.setSelectionFilter(elPath, 0, i)
this.addListeners(elPath, this.radialDataLabels)
elRadialBarArc.add(elPath)
elPath.attr({
index: 0,
j: i
})
let dur = 0
if (this.initialAnim && !w.globals.resized && !w.globals.dataChanged) {
dur = w.config.chart.animations.speed
}
if (w.globals.dataChanged) {
dur = w.config.chart.animations.dynamicAnimation.speed
}
this.animDur = dur / (opts.series.length * 1.2) + this.animDur
this.animBeginArr.push(this.animDur)
this.animatePaths(elPath, {
centerX: opts.centerX,
centerY: opts.centerY,
endAngle,
startAngle,
prevEndAngle,
prevStartAngle,
size: opts.size,
i,
totalItems: 2,
animBeginArr: this.animBeginArr,
dur,
shouldSetPrevPaths: true,
easing: w.globals.easing
})
}
return {
g,
elHollow,
dataLabels
}
}
drawHollow(opts) {
const graphics = new Graphics(this.ctx)
let circle = graphics.drawCircle(opts.size * 2)
circle.attr({
class: 'apexcharts-radialbar-hollow',
cx: opts.centerX,
cy: opts.centerY,
r: opts.size,
fill: opts.fill
})
return circle
}
drawHollowImage(opts, g, hollowSize, hollowFillID) {
const w = this.w
let fill = new Fill(this.ctx)
let randID = Utils.randomId()
let hollowFillImg = w.config.plotOptions.radialBar.hollow.image
if (w.config.plotOptions.radialBar.hollow.imageClipped) {
fill.clippedImgArea({
width: hollowSize,
height: hollowSize,
image: hollowFillImg,
patternID: `pattern${w.globals.cuid}${randID}`
})
hollowFillID = `url(#pattern${w.globals.cuid}${randID})`
} else {
const imgWidth = w.config.plotOptions.radialBar.hollow.imageWidth
const imgHeight = w.config.plotOptions.radialBar.hollow.imageHeight
if (imgWidth === undefined && imgHeight === undefined) {
let image = w.globals.dom.Paper.image(hollowFillImg).loaded(function(
loader
) {
this.move(
opts.centerX -
loader.width / 2 +
w.config.plotOptions.radialBar.hollow.imageOffsetX,
opts.centerY -
loader.height / 2 +
w.config.plotOptions.radialBar.hollow.imageOffsetY
)
})
g.add(image)
} else {
let image = w.globals.dom.Paper.image(hollowFillImg).loaded(function(
loader
) {
this.move(
opts.centerX -
imgWidth / 2 +
w.config.plotOptions.radialBar.hollow.imageOffsetX,
opts.centerY -
imgHeight / 2 +
w.config.plotOptions.radialBar.hollow.imageOffsetY
)
this.size(imgWidth, imgHeight)
})
g.add(image)
}
}
return hollowFillID
}
getStrokeWidth(opts) {
const w = this.w
return (
(opts.size *
(100 - parseInt(w.config.plotOptions.radialBar.hollow.size, 10))) /
100 /
(opts.series.length + 1) -
this.margin
)
}
}
export default Radial

View File

@@ -1,454 +0,0 @@
import Bar from './Bar'
import Graphics from '../modules/Graphics'
import Utils from '../utils/Utils'
import DateTime from '../utils/DateTime'
/**
* ApexCharts RangeBar Class responsible for drawing Range/Timeline Bars.
*
* @module RangeBar
**/
class RangeBar extends Bar {
draw(series, seriesIndex) {
let w = this.w
let graphics = new Graphics(this.ctx)
this.rangeBarOptions = this.w.config.plotOptions.rangeBar
this.series = series
this.seriesRangeStart = w.globals.seriesRangeStart
this.seriesRangeEnd = w.globals.seriesRangeEnd
this.barHelpers.initVariables(series)
let ret = graphics.group({
class: 'apexcharts-rangebar-series apexcharts-plot-series'
})
for (let i = 0; i < series.length; i++) {
let x,
y,
xDivision, // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
yDivision, // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
zeroH, // zeroH is the baseline where 0 meets y axis
zeroW // zeroW is the baseline where 0 meets x axis
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
// el to which series will be drawn
let elSeries = graphics.group({
class: `apexcharts-series`,
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]),
rel: i + 1,
'data:realIndex': realIndex
})
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
if (series[i].length > 0) {
this.visibleI = this.visibleI + 1
}
let barHeight = 0
let barWidth = 0
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex
}
let initPositions = this.barHelpers.initialPositions()
y = initPositions.y
zeroW = initPositions.zeroW
x = initPositions.x
barWidth = initPositions.barWidth
xDivision = initPositions.xDivision
zeroH = initPositions.zeroH
// eldatalabels
let elDataLabelsWrap = graphics.group({
class: 'apexcharts-datalabels',
'data:realIndex': realIndex
})
let elGoalsMarkers = graphics.group({
class: 'apexcharts-rangebar-goals-markers',
style: `pointer-events: none`
})
for (let j = 0; j < w.globals.dataPoints; j++) {
const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
const y1 = this.seriesRangeStart[i][j]
const y2 = this.seriesRangeEnd[i][j]
let paths = null
let barYPosition = null
const params = { x, y, strokeWidth, elSeries }
yDivision = initPositions.yDivision
barHeight = initPositions.barHeight
if (this.isHorizontal) {
barYPosition = y + barHeight * this.visibleI
let seriesLen = this.seriesLen
if (w.config.plotOptions.bar.rangeBarGroupRows) {
seriesLen = 1
}
let srty = (yDivision - barHeight * seriesLen) / 2
if (typeof w.config.series[i].data[j] === 'undefined') {
// no data exists for further indexes, hence we need to get out the innr loop.
// As we are iterating over total datapoints, there is a possiblity the series might not have data for j index
break
}
if (w.config.series[i].data[j].x) {
let positions = this.detectOverlappingBars({
i,
j,
barYPosition,
srty,
barHeight,
yDivision,
initPositions
})
barHeight = positions.barHeight
barYPosition = positions.barYPosition
}
paths = this.drawRangeBarPaths({
indexes: { i, j, realIndex },
barHeight,
barYPosition,
zeroW,
yDivision,
y1,
y2,
...params
})
barWidth = paths.barWidth
} else {
paths = this.drawRangeColumnPaths({
indexes: { i, j, realIndex },
zeroH,
barWidth,
xDivision,
...params
})
barHeight = paths.barHeight
}
const barGoalLine = this.barHelpers.drawGoalLine({
barXPosition: paths.barXPosition,
barYPosition,
goalX: paths.goalX,
goalY: paths.goalY,
barHeight,
barWidth
})
if (barGoalLine) {
elGoalsMarkers.add(barGoalLine)
}
y = paths.y
x = paths.x
let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)
let lineFill = w.globals.stroke.colors[realIndex]
this.renderSeries({
realIndex,
pathFill,
lineFill,
j,
i,
x,
y,
y1,
y2,
pathFrom: paths.pathFrom,
pathTo: paths.pathTo,
strokeWidth,
elSeries,
series,
barHeight,
barYPosition,
barWidth,
elDataLabelsWrap,
elGoalsMarkers,
visibleSeries: this.visibleI,
type: 'rangebar'
})
}
ret.add(elSeries)
}
return ret
}
detectOverlappingBars({
i,
j,
barYPosition,
srty,
barHeight,
yDivision,
initPositions
}) {
const w = this.w
let overlaps = []
let rangeName = w.config.series[i].data[j].rangeName
const labelX = w.config.series[i].data[j].x
const rowIndex = w.globals.labels.indexOf(labelX)
const overlappedIndex = w.globals.seriesRangeBar[i].findIndex(
(tx) => tx.x === labelX && tx.overlaps.length > 0
)
if (w.config.plotOptions.bar.rangeBarGroupRows) {
barYPosition = srty + yDivision * rowIndex
} else {
barYPosition = srty + barHeight * this.visibleI + yDivision * rowIndex
}
if (overlappedIndex > -1 && !w.config.plotOptions.bar.rangeBarOverlap) {
overlaps = w.globals.seriesRangeBar[i][overlappedIndex].overlaps
if (overlaps.indexOf(rangeName) > -1) {
barHeight = initPositions.barHeight / overlaps.length
barYPosition =
barHeight * this.visibleI +
(yDivision * (100 - parseInt(this.barOptions.barHeight, 10))) /
100 /
2 +
barHeight * (this.visibleI + overlaps.indexOf(rangeName)) +
yDivision * rowIndex
}
}
return {
barYPosition,
barHeight
}
}
drawRangeColumnPaths({
indexes,
x,
strokeWidth,
xDivision,
barWidth,
zeroH
}) {
let w = this.w
let i = indexes.i
let j = indexes.j
const yRatio = this.yRatio[this.yaxisIndex]
let realIndex = indexes.realIndex
const range = this.getRangeValue(realIndex, j)
let y1 = Math.min(range.start, range.end)
let y2 = Math.max(range.start, range.end)
if (w.globals.isXNumeric) {
x =
(w.globals.seriesX[i][j] - w.globals.minX) / this.xRatio - barWidth / 2
}
let barXPosition = x + barWidth * this.visibleI
if (
typeof this.series[i][j] === 'undefined' ||
this.series[i][j] === null
) {
y1 = zeroH
} else {
y1 = zeroH - y1 / yRatio
y2 = zeroH - y2 / yRatio
}
const barHeight = Math.abs(y2 - y1)
const paths = this.barHelpers.getColumnPaths({
barXPosition,
barWidth,
y1,
y2,
strokeWidth: this.strokeWidth,
series: this.seriesRangeEnd,
realIndex: indexes.realIndex,
i: realIndex,
j,
w
})
if (!w.globals.isXNumeric) {
x = x + xDivision
}
return {
pathTo: paths.pathTo,
pathFrom: paths.pathFrom,
barHeight,
x,
y: y2,
goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j),
barXPosition
}
}
drawRangeBarPaths({
indexes,
y,
y1,
y2,
yDivision,
barHeight,
barYPosition,
zeroW
}) {
let w = this.w
const x1 = zeroW + y1 / this.invertedYRatio
const x2 = zeroW + y2 / this.invertedYRatio
const barWidth = Math.abs(x2 - x1)
const paths = this.barHelpers.getBarpaths({
barYPosition,
barHeight,
x1,
x2,
strokeWidth: this.strokeWidth,
series: this.seriesRangeEnd,
i: indexes.realIndex,
realIndex: indexes.realIndex,
j: indexes.j,
w
})
if (!w.globals.isXNumeric) {
y = y + yDivision
}
return {
pathTo: paths.pathTo,
pathFrom: paths.pathFrom,
barWidth,
x: x2,
goalX: this.barHelpers.getGoalValues(
'x',
zeroW,
null,
indexes.realIndex,
indexes.j
),
y
}
}
getRangeValue(i, j) {
const w = this.w
return {
start: w.globals.seriesRangeStart[i][j],
end: w.globals.seriesRangeEnd[i][j]
}
}
getTooltipValues({ ctx, seriesIndex, dataPointIndex, y1, y2, w }) {
let start = w.globals.seriesRangeStart[seriesIndex][dataPointIndex]
let end = w.globals.seriesRangeEnd[seriesIndex][dataPointIndex]
let ylabel = w.globals.labels[dataPointIndex]
let seriesName = w.config.series[seriesIndex].name
? w.config.series[seriesIndex].name
: ''
const yLbFormatter = w.config.tooltip.y.formatter
const yLbTitleFormatter = w.config.tooltip.y.title.formatter
const opts = {
w,
seriesIndex,
dataPointIndex,
start,
end
}
if (typeof yLbTitleFormatter === 'function') {
seriesName = yLbTitleFormatter(seriesName, opts)
}
if (Number.isFinite(y1) && Number.isFinite(y2)) {
start = y1
end = y2
if (w.config.series[seriesIndex].data[dataPointIndex].x) {
ylabel = w.config.series[seriesIndex].data[dataPointIndex].x + ':'
}
if (typeof yLbFormatter === 'function') {
ylabel = yLbFormatter(ylabel, opts)
}
}
let startVal = ''
let endVal = ''
const color = w.globals.colors[seriesIndex]
if (w.config.tooltip.x.formatter === undefined) {
if (w.config.xaxis.type === 'datetime') {
let datetimeObj = new DateTime(ctx)
startVal = datetimeObj.formatDate(
datetimeObj.getDate(start),
w.config.tooltip.x.format
)
endVal = datetimeObj.formatDate(
datetimeObj.getDate(end),
w.config.tooltip.x.format
)
} else {
startVal = start
endVal = end
}
} else {
startVal = w.config.tooltip.x.formatter(start)
endVal = w.config.tooltip.x.formatter(end)
}
return { start, end, startVal, endVal, ylabel, color, seriesName }
}
buildCustomTooltipHTML({ color, seriesName, ylabel, start, end }) {
return (
'<div class="apexcharts-tooltip-rangebar">' +
'<div> <span class="series-name" style="color: ' +
color +
'">' +
(seriesName ? seriesName : '') +
'</span></div>' +
'<div> <span class="category">' +
ylabel +
' </span> <span class="value start-value">' +
start +
'</span> <span class="separator">-</span> <span class="value end-value">' +
end +
'</span></div>' +
'</div>'
)
}
}
export default RangeBar

View File

@@ -1,267 +0,0 @@
import Animations from '../modules/Animations'
import Fill from '../modules/Fill'
import Filters from '../modules/Filters'
import Graphics from '../modules/Graphics'
import Markers from '../modules/Markers'
/**
* ApexCharts Scatter Class.
* This Class also handles bubbles chart as currently there is no major difference in drawing them,
* @module Scatter
**/
export default class Scatter {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.initialAnim = this.w.config.chart.animations.enabled
this.dynamicAnim =
this.initialAnim &&
this.w.config.chart.animations.dynamicAnimation.enabled
}
draw(elSeries, j, opts) {
let w = this.w
let graphics = new Graphics(this.ctx)
let realIndex = opts.realIndex
let pointsPos = opts.pointsPos
let zRatio = opts.zRatio
let elPointsMain = opts.elParent
let elPointsWrap = graphics.group({
class: `apexcharts-series-markers apexcharts-series-${w.config.chart.type}`
})
elPointsWrap.attr('clip-path', `url(#gridRectMarkerMask${w.globals.cuid})`)
if (Array.isArray(pointsPos.x)) {
for (let q = 0; q < pointsPos.x.length; q++) {
let dataPointIndex = j + 1
let shouldDraw = true
// a small hack as we have 2 points for the first val to connect it
if (j === 0 && q === 0) dataPointIndex = 0
if (j === 0 && q === 1) dataPointIndex = 1
let radius = 0
let finishRadius = w.globals.markers.size[realIndex]
if (zRatio !== Infinity) {
// means we have a bubble
finishRadius = w.globals.seriesZ[realIndex][dataPointIndex] / zRatio
const bubble = w.config.plotOptions.bubble
if (bubble.minBubbleRadius && finishRadius < bubble.minBubbleRadius) {
finishRadius = bubble.minBubbleRadius
}
if (bubble.maxBubbleRadius && finishRadius > bubble.maxBubbleRadius) {
finishRadius = bubble.maxBubbleRadius
}
}
if (!w.config.chart.animations.enabled) {
radius = finishRadius
}
let x = pointsPos.x[q]
let y = pointsPos.y[q]
radius = radius || 0
if (
y === null ||
typeof w.globals.series[realIndex][dataPointIndex] === 'undefined'
) {
shouldDraw = false
}
if (shouldDraw) {
const point = this.drawPoint(
x,
y,
radius,
finishRadius,
realIndex,
dataPointIndex,
j
)
elPointsWrap.add(point)
}
elPointsMain.add(elPointsWrap)
}
}
}
drawPoint(x, y, radius, finishRadius, realIndex, dataPointIndex, j) {
const w = this.w
let i = realIndex
let anim = new Animations(this.ctx)
let filters = new Filters(this.ctx)
let fill = new Fill(this.ctx)
let markers = new Markers(this.ctx)
const graphics = new Graphics(this.ctx)
const markerConfig = markers.getMarkerConfig({
cssClass: 'apexcharts-marker',
seriesIndex: i,
dataPointIndex,
finishRadius:
w.config.chart.type === 'bubble' ||
(w.globals.comboCharts &&
w.config.series[realIndex] &&
w.config.series[realIndex].type === 'bubble')
? finishRadius
: null
})
finishRadius = markerConfig.pSize
let pathFillCircle = fill.fillPath({
seriesNumber: realIndex,
dataPointIndex,
color: markerConfig.pointFillColor,
patternUnits: 'objectBoundingBox',
value: w.globals.series[realIndex][j]
})
let el
if (markerConfig.shape === 'circle') {
el = graphics.drawCircle(radius)
} else if (
markerConfig.shape === 'square' ||
markerConfig.shape === 'rect'
) {
el = graphics.drawRect(
0,
0,
markerConfig.width - markerConfig.pointStrokeWidth / 2,
markerConfig.height - markerConfig.pointStrokeWidth / 2,
markerConfig.pRadius
)
}
if (w.config.series[i].data[dataPointIndex]) {
if (w.config.series[i].data[dataPointIndex].fillColor) {
pathFillCircle = w.config.series[i].data[dataPointIndex].fillColor
}
}
el.attr({
x: x - markerConfig.width / 2 - markerConfig.pointStrokeWidth / 2,
y: y - markerConfig.height / 2 - markerConfig.pointStrokeWidth / 2,
cx: x,
cy: y,
fill: pathFillCircle,
'fill-opacity': markerConfig.pointFillOpacity,
stroke: markerConfig.pointStrokeColor,
r: finishRadius,
'stroke-width': markerConfig.pointStrokeWidth,
'stroke-dasharray': markerConfig.pointStrokeDashArray,
'stroke-opacity': markerConfig.pointStrokeOpacity
})
if (w.config.chart.dropShadow.enabled) {
const dropShadow = w.config.chart.dropShadow
filters.dropShadow(el, dropShadow, realIndex)
}
if (this.initialAnim && !w.globals.dataChanged && !w.globals.resized) {
let speed = w.config.chart.animations.speed
anim.animateMarker(
el,
0,
markerConfig.shape === 'circle'
? finishRadius
: { width: markerConfig.width, height: markerConfig.height },
speed,
w.globals.easing,
() => {
window.setTimeout(() => {
anim.animationCompleted(el)
}, 100)
}
)
} else {
w.globals.animationEnded = true
}
if (w.globals.dataChanged && markerConfig.shape === 'circle') {
if (this.dynamicAnim) {
let speed = w.config.chart.animations.dynamicAnimation.speed
let prevX, prevY, prevR
let prevPathJ = null
prevPathJ =
w.globals.previousPaths[realIndex] &&
w.globals.previousPaths[realIndex][j]
if (typeof prevPathJ !== 'undefined' && prevPathJ !== null) {
// series containing less elements will ignore these values and revert to 0
prevX = prevPathJ.x
prevY = prevPathJ.y
prevR =
typeof prevPathJ.r !== 'undefined' ? prevPathJ.r : finishRadius
}
for (let cs = 0; cs < w.globals.collapsedSeries.length; cs++) {
if (w.globals.collapsedSeries[cs].index === realIndex) {
speed = 1
finishRadius = 0
}
}
if (x === 0 && y === 0) finishRadius = 0
anim.animateCircle(
el,
{
cx: prevX,
cy: prevY,
r: prevR
},
{
cx: x,
cy: y,
r: finishRadius
},
speed,
w.globals.easing
)
} else {
el.attr({
r: finishRadius
})
}
}
el.attr({
rel: dataPointIndex,
j: dataPointIndex,
index: realIndex,
'default-marker-size': finishRadius
})
filters.setSelectionFilter(el, realIndex, dataPointIndex)
markers.addEvents(el)
el.node.classList.add('apexcharts-marker')
return el
}
centerTextInBubble(y) {
let w = this.w
y = y + parseInt(w.config.dataLabels.style.fontSize, 10) / 4
return {
y
}
}
}

View File

@@ -1,302 +0,0 @@
import '../libs/Treemap-squared'
import Graphics from '../modules/Graphics'
import Animations from '../modules/Animations'
import Fill from '../modules/Fill'
import Helpers from './common/treemap/Helpers'
import Filters from '../modules/Filters'
import Utils from '../utils/Utils'
/**
* ApexCharts TreemapChart Class.
* @module TreemapChart
**/
export default class TreemapChart {
constructor(ctx, xyRatios) {
this.ctx = ctx
this.w = ctx.w
this.strokeWidth = this.w.config.stroke.width
this.helpers = new Helpers(ctx)
this.dynamicAnim = this.w.config.chart.animations.dynamicAnimation
this.labels = []
}
draw(series) {
let w = this.w
const graphics = new Graphics(this.ctx)
const fill = new Fill(this.ctx)
let ret = graphics.group({
class: 'apexcharts-treemap'
})
if (w.globals.noData) return ret
let ser = []
series.forEach((s) => {
let d = s.map((v) => {
return Math.abs(v)
})
ser.push(d)
})
this.negRange = this.helpers.checkColorRange()
w.config.series.forEach((s, i) => {
s.data.forEach((l) => {
if (!Array.isArray(this.labels[i])) this.labels[i] = []
this.labels[i].push(l.x)
})
})
const nodes = window.TreemapSquared.generate(
ser,
w.globals.gridWidth,
w.globals.gridHeight
)
nodes.forEach((node, i) => {
let elSeries = graphics.group({
class: `apexcharts-series apexcharts-treemap-series`,
seriesName: Utils.escapeString(w.globals.seriesNames[i]),
rel: i + 1,
'data:realIndex': i
})
if (w.config.chart.dropShadow.enabled) {
const shadow = w.config.chart.dropShadow
const filters = new Filters(this.ctx)
filters.dropShadow(ret, shadow, i)
}
let elDataLabelWrap = graphics.group({
class: 'apexcharts-data-labels'
})
node.forEach((r, j) => {
const x1 = r[0]
const y1 = r[1]
const x2 = r[2]
const y2 = r[3]
let elRect = graphics.drawRect(
x1,
y1,
x2 - x1,
y2 - y1,
0,
'#fff',
1,
this.strokeWidth,
w.config.plotOptions.treemap.useFillColorAsStroke
? color
: w.globals.stroke.colors[i]
)
elRect.attr({
cx: x1,
cy: y1,
index: i,
i,
j,
width: x2 - x1,
height: y2 - y1
})
let colorProps = this.helpers.getShadeColor(
w.config.chart.type,
i,
j,
this.negRange
)
let color = colorProps.color
if (
typeof w.config.series[i].data[j] !== 'undefined' &&
w.config.series[i].data[j].fillColor
) {
color = w.config.series[i].data[j].fillColor
}
let pathFill = fill.fillPath({
color,
seriesNumber: i,
dataPointIndex: j
})
elRect.node.classList.add('apexcharts-treemap-rect')
elRect.attr({
fill: pathFill
})
this.helpers.addListeners(elRect)
let fromRect = {
x: x1 + (x2 - x1) / 2,
y: y1 + (y2 - y1) / 2,
width: 0,
height: 0
}
let toRect = {
x: x1,
y: y1,
width: x2 - x1,
height: y2 - y1
}
if (w.config.chart.animations.enabled && !w.globals.dataChanged) {
let speed = 1
if (!w.globals.resized) {
speed = w.config.chart.animations.speed
}
this.animateTreemap(elRect, fromRect, toRect, speed)
}
if (w.globals.dataChanged) {
let speed = 1
if (this.dynamicAnim.enabled && w.globals.shouldAnimate) {
speed = this.dynamicAnim.speed
if (
w.globals.previousPaths[i] &&
w.globals.previousPaths[i][j] &&
w.globals.previousPaths[i][j].rect
) {
fromRect = w.globals.previousPaths[i][j].rect
}
this.animateTreemap(elRect, fromRect, toRect, speed)
}
}
const fontSize = this.getFontSize(r)
let formattedText = w.config.dataLabels.formatter(this.labels[i][j], {
value: w.globals.series[i][j],
seriesIndex: i,
dataPointIndex: j,
w
})
let dataLabels = this.helpers.calculateDataLabels({
text: formattedText,
x: (x1 + x2) / 2,
y: (y1 + y2) / 2 + this.strokeWidth / 2 + fontSize / 3,
i,
j,
colorProps,
fontSize,
series
})
if (w.config.dataLabels.enabled && dataLabels) {
this.rotateToFitLabel(dataLabels, formattedText, x1, y1, x2, y2)
}
elSeries.add(elRect)
if (dataLabels !== null) {
elSeries.add(dataLabels)
}
})
elSeries.add(elDataLabelWrap)
ret.add(elSeries)
})
return ret
}
// This calculates a font-size based upon
// average label length and the size of the box the label is
// going into. The maximum font size is set in chart config.
getFontSize(coordinates) {
const w = this.w
// total length of labels (i.e [["Italy"],["Spain", "Greece"]] -> 16)
function totalLabelLength(arr) {
let i,
total = 0
if (Array.isArray(arr[0])) {
for (i = 0; i < arr.length; i++) {
total += totalLabelLength(arr[i])
}
} else {
for (i = 0; i < arr.length; i++) {
total += arr[i].length
}
}
return total
}
// count of labels (i.e [["Italy"],["Spain", "Greece"]] -> 3)
function countLabels(arr) {
let i,
total = 0
if (Array.isArray(arr[0])) {
for (i = 0; i < arr.length; i++) {
total += countLabels(arr[i])
}
} else {
for (i = 0; i < arr.length; i++) {
total += 1
}
}
return total
}
let averagelabelsize =
totalLabelLength(this.labels) / countLabels(this.labels)
function fontSize(width, height) {
// the font size should be proportional to the size of the box (and the value)
// otherwise you can end up creating a visual distortion where two boxes of identical
// size have different sized labels, and thus make it look as if the two boxes
// represent different sizes
let area = width * height
let arearoot = Math.pow(area, 0.5)
return Math.min(
arearoot / averagelabelsize,
parseInt(w.config.dataLabels.style.fontSize, 10)
)
}
return fontSize(
coordinates[2] - coordinates[0],
coordinates[3] - coordinates[1]
)
}
rotateToFitLabel(elText, text, x1, y1, x2, y2) {
const graphics = new Graphics(this.ctx)
const textRect = graphics.getTextRects(text)
//if the label fits better sideways then rotate it
if (textRect.width + 5 > x2 - x1 && textRect.width <= y2 - y1) {
let labelRotatingCenter = graphics.rotateAroundCenter(elText.node)
elText.node.setAttribute(
'transform',
`rotate(-90 ${labelRotatingCenter.x} ${labelRotatingCenter.y})`
)
}
}
animateTreemap(el, fromRect, toRect, speed) {
const animations = new Animations(this.ctx)
animations.animateRect(
el,
{
x: fromRect.x,
y: fromRect.y,
width: fromRect.width,
height: fromRect.height
},
{
x: toRect.x,
y: toRect.y,
width: toRect.width,
height: toRect.height
},
speed,
() => {
animations.animationCompleted(el)
}
)
}
}

View File

@@ -1,442 +0,0 @@
import Graphics from '../../../modules/Graphics'
import DataLabels from '../../../modules/DataLabels'
export default class BarDataLabels {
constructor(barCtx) {
this.w = barCtx.w
this.barCtx = barCtx
}
/** handleBarDataLabels is used to calculate the positions for the data-labels
* It also sets the element's data attr for bars and calls drawCalculatedBarDataLabels()
* After calculating, it also calls the function to draw data labels
* @memberof Bar
* @param {object} {barProps} most of the bar properties used throughout the bar
* drawing function
* @return {object} dataLabels node-element which you can append later
**/
handleBarDataLabels(opts) {
let {
x,
y,
y1,
y2,
i,
j,
realIndex,
series,
barHeight,
barWidth,
barYPosition,
visibleSeries,
renderedPath
} = opts
let w = this.w
let graphics = new Graphics(this.barCtx.ctx)
let strokeWidth = Array.isArray(this.barCtx.strokeWidth)
? this.barCtx.strokeWidth[realIndex]
: this.barCtx.strokeWidth
let bcx = x + parseFloat(barWidth * visibleSeries)
let bcy = y + parseFloat(barHeight * visibleSeries)
if (w.globals.isXNumeric && !w.globals.isBarHorizontal) {
bcx = x + parseFloat(barWidth * (visibleSeries + 1))
bcy = y + parseFloat(barHeight * (visibleSeries + 1)) - strokeWidth
}
let dataLabels = null
let dataLabelsX = x
let dataLabelsY = y
let dataLabelsPos = {}
let dataLabelsConfig = w.config.dataLabels
let barDataLabelsConfig = this.barCtx.barOptions.dataLabels
if (typeof barYPosition !== 'undefined' && this.barCtx.isRangeBar) {
bcy = barYPosition
dataLabelsY = barYPosition
}
const offX = dataLabelsConfig.offsetX
const offY = dataLabelsConfig.offsetY
let textRects = {
width: 0,
height: 0
}
if (w.config.dataLabels.enabled) {
const yLabel = this.barCtx.series[i][j]
textRects = graphics.getTextRects(
w.globals.yLabelFormatters[0](yLabel),
parseFloat(dataLabelsConfig.style.fontSize)
)
}
const params = {
x,
y,
i,
j,
renderedPath,
bcx,
bcy,
barHeight,
barWidth,
textRects,
strokeWidth,
dataLabelsX,
dataLabelsY,
barDataLabelsConfig,
offX,
offY
}
if (this.barCtx.isHorizontal) {
dataLabelsPos = this.calculateBarsDataLabelsPosition(params)
} else {
dataLabelsPos = this.calculateColumnsDataLabelsPosition(params)
}
renderedPath.attr({
cy: dataLabelsPos.bcy,
cx: dataLabelsPos.bcx,
j,
val: series[i][j],
barHeight,
barWidth
})
dataLabels = this.drawCalculatedDataLabels({
x: dataLabelsPos.dataLabelsX,
y: dataLabelsPos.dataLabelsY,
val: this.barCtx.isRangeBar ? [y1, y2] : series[i][j],
i: realIndex,
j,
barWidth,
barHeight,
textRects,
dataLabelsConfig
})
return dataLabels
}
calculateColumnsDataLabelsPosition(opts) {
const w = this.w
let {
i,
j,
y,
bcx,
barWidth,
barHeight,
textRects,
dataLabelsY,
barDataLabelsConfig,
strokeWidth,
offX,
offY
} = opts
let dataLabelsX
barHeight = Math.abs(barHeight)
let vertical =
w.config.plotOptions.bar.dataLabels.orientation === 'vertical'
bcx = bcx - strokeWidth / 2
let dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints
if (w.globals.isXNumeric) {
dataLabelsX = bcx - barWidth / 2 + offX
} else {
dataLabelsX = bcx - dataPointsDividedWidth + barWidth / 2 + offX
}
if (vertical) {
const offsetDLX = 2
dataLabelsX =
dataLabelsX + textRects.height / 2 - strokeWidth / 2 - offsetDLX
}
let valIsNegative = this.barCtx.series[i][j] < 0
let newY = y
if (this.barCtx.isReversed) {
newY = y - barHeight + (valIsNegative ? barHeight * 2 : 0)
y = y - barHeight
}
switch (barDataLabelsConfig.position) {
case 'center':
if (vertical) {
if (valIsNegative) {
dataLabelsY = newY + barHeight / 2 + offY
} else {
dataLabelsY = newY + barHeight / 2 - offY
}
} else {
if (valIsNegative) {
dataLabelsY = newY - barHeight / 2 + textRects.height / 2 + offY
} else {
dataLabelsY = newY + barHeight / 2 + textRects.height / 2 - offY
}
}
break
case 'bottom':
if (vertical) {
if (valIsNegative) {
dataLabelsY = newY + barHeight + offY
} else {
dataLabelsY = newY + barHeight - offY
}
} else {
if (valIsNegative) {
dataLabelsY =
newY - barHeight + textRects.height + strokeWidth + offY
} else {
dataLabelsY =
newY + barHeight - textRects.height / 2 + strokeWidth - offY
}
}
break
case 'top':
if (vertical) {
if (valIsNegative) {
dataLabelsY = newY + offY
} else {
dataLabelsY = newY - offY
}
} else {
if (valIsNegative) {
dataLabelsY = newY - textRects.height / 2 - offY
} else {
dataLabelsY = newY + textRects.height + offY
}
}
break
}
if (!w.config.chart.stacked) {
if (dataLabelsY < 0) {
dataLabelsY = 0 + strokeWidth
} else if (dataLabelsY + textRects.height / 3 > w.globals.gridHeight) {
dataLabelsY = w.globals.gridHeight - strokeWidth
}
}
return {
bcx,
bcy: y,
dataLabelsX,
dataLabelsY
}
}
calculateBarsDataLabelsPosition(opts) {
const w = this.w
let {
x,
i,
j,
bcy,
barHeight,
barWidth,
textRects,
dataLabelsX,
strokeWidth,
barDataLabelsConfig,
offX,
offY
} = opts
let dataPointsDividedHeight = w.globals.gridHeight / w.globals.dataPoints
barWidth = Math.abs(barWidth)
let dataLabelsY =
bcy -
(this.barCtx.isRangeBar ? 0 : dataPointsDividedHeight) +
barHeight / 2 +
textRects.height / 2 +
offY -
3
let valIsNegative = this.barCtx.series[i][j] < 0
let newX = x
if (this.barCtx.isReversed) {
newX = x + barWidth - (valIsNegative ? barWidth * 2 : 0)
x = w.globals.gridWidth - barWidth
}
switch (barDataLabelsConfig.position) {
case 'center':
if (valIsNegative) {
dataLabelsX = newX + barWidth / 2 - offX
} else {
dataLabelsX =
Math.max(textRects.width / 2, newX - barWidth / 2) + offX
}
break
case 'bottom':
if (valIsNegative) {
dataLabelsX =
newX +
barWidth -
strokeWidth -
Math.round(textRects.width / 2) -
offX
} else {
dataLabelsX =
newX -
barWidth +
strokeWidth +
Math.round(textRects.width / 2) +
offX
}
break
case 'top':
if (valIsNegative) {
dataLabelsX =
newX - strokeWidth + Math.round(textRects.width / 2) - offX
} else {
dataLabelsX =
newX - strokeWidth - Math.round(textRects.width / 2) + offX
}
break
}
if (!w.config.chart.stacked) {
if (dataLabelsX < 0) {
dataLabelsX = dataLabelsX + textRects.width + strokeWidth
} else if (dataLabelsX + textRects.width / 2 > w.globals.gridWidth) {
dataLabelsX = w.globals.gridWidth - textRects.width - strokeWidth
}
}
return {
bcx: x,
bcy,
dataLabelsX,
dataLabelsY
}
}
drawCalculatedDataLabels({
x,
y,
val,
i,
j,
textRects,
barHeight,
barWidth,
dataLabelsConfig
}) {
const w = this.w
let rotate = 'rotate(0)'
if (w.config.plotOptions.bar.dataLabels.orientation === 'vertical')
rotate = `rotate(-90, ${x}, ${y})`
const dataLabels = new DataLabels(this.barCtx.ctx)
const graphics = new Graphics(this.barCtx.ctx)
const formatter = dataLabelsConfig.formatter
let elDataLabelsWrap = null
const isSeriesNotCollapsed =
w.globals.collapsedSeriesIndices.indexOf(i) > -1
if (dataLabelsConfig.enabled && !isSeriesNotCollapsed) {
elDataLabelsWrap = graphics.group({
class: 'apexcharts-data-labels',
transform: rotate
})
let text = ''
if (typeof val !== 'undefined') {
text = formatter(val, {
seriesIndex: i,
dataPointIndex: j,
w
})
}
let valIsNegative = w.globals.series[i][j] < 0
let position = w.config.plotOptions.bar.dataLabels.position
if (w.config.plotOptions.bar.dataLabels.orientation === 'vertical') {
if (position === 'top') {
if (valIsNegative) dataLabelsConfig.textAnchor = 'end'
else dataLabelsConfig.textAnchor = 'start'
}
if (position === 'center') {
dataLabelsConfig.textAnchor = 'middle'
}
if (position === 'bottom') {
if (valIsNegative) dataLabelsConfig.textAnchor = 'end'
else dataLabelsConfig.textAnchor = 'start'
}
}
if (
this.barCtx.isRangeBar &&
this.barCtx.barOptions.dataLabels.hideOverflowingLabels
) {
// hide the datalabel if it cannot fit into the rect
const txRect = graphics.getTextRects(
text,
parseFloat(dataLabelsConfig.style.fontSize)
)
if (barWidth < txRect.width) {
text = ''
}
}
if (
w.config.chart.stacked &&
this.barCtx.barOptions.dataLabels.hideOverflowingLabels
) {
// if there is not enough space to draw the label in the bar/column rect, check hideOverflowingLabels property to prevent overflowing on wrong rect
// Note: This issue is only seen in stacked charts
if (this.barCtx.isHorizontal) {
if (textRects.width / 1.6 > Math.abs(barWidth)) {
text = ''
}
} else {
if (textRects.height / 1.6 > Math.abs(barHeight)) {
text = ''
}
}
}
let modifiedDataLabelsConfig = {
...dataLabelsConfig
}
if (this.barCtx.isHorizontal) {
if (val < 0) {
if (dataLabelsConfig.textAnchor === 'start') {
modifiedDataLabelsConfig.textAnchor = 'end'
} else if (dataLabelsConfig.textAnchor === 'end') {
modifiedDataLabelsConfig.textAnchor = 'start'
}
}
}
dataLabels.plotDataLabelsText({
x,
y,
text,
i,
j,
parent: elDataLabelsWrap,
dataLabelsConfig: modifiedDataLabelsConfig,
alwaysDrawDataLabel: true,
offsetCorrection: true
})
}
return elDataLabelsWrap
}
}

View File

@@ -1,638 +0,0 @@
import Fill from '../../../modules/Fill'
import Graphics from '../../../modules/Graphics'
import Series from '../../../modules/Series'
export default class Helpers {
constructor(barCtx) {
this.w = barCtx.w
this.barCtx = barCtx
}
initVariables(series) {
const w = this.w
this.barCtx.series = series
this.barCtx.totalItems = 0
this.barCtx.seriesLen = 0
this.barCtx.visibleI = -1 // visible Series
this.barCtx.visibleItems = 1 // number of visible bars after user zoomed in/out
for (let sl = 0; sl < series.length; sl++) {
if (series[sl].length > 0) {
this.barCtx.seriesLen = this.barCtx.seriesLen + 1
this.barCtx.totalItems += series[sl].length
}
if (w.globals.isXNumeric) {
// get max visible items
for (let j = 0; j < series[sl].length; j++) {
if (
w.globals.seriesX[sl][j] > w.globals.minX &&
w.globals.seriesX[sl][j] < w.globals.maxX
) {
this.barCtx.visibleItems++
}
}
} else {
this.barCtx.visibleItems = w.globals.dataPoints
}
}
if (this.barCtx.seriesLen === 0) {
// A small adjustment when combo charts are used
this.barCtx.seriesLen = 1
}
this.barCtx.zeroSerieses = []
this.barCtx.radiusOnSeriesNumber = series.length - 1 // which series to draw ending shape on
if (!w.globals.comboCharts) {
this.checkZeroSeries({ series })
}
}
initialPositions() {
let w = this.w
let x, y, yDivision, xDivision, barHeight, barWidth, zeroH, zeroW
let dataPoints = w.globals.dataPoints
if (this.barCtx.isRangeBar) {
// timeline rangebar chart
dataPoints = w.globals.labels.length
}
let seriesLen = this.barCtx.seriesLen
if (w.config.plotOptions.bar.rangeBarGroupRows) {
seriesLen = 1
}
if (this.barCtx.isHorizontal) {
// height divided into equal parts
yDivision = w.globals.gridHeight / dataPoints
barHeight = yDivision / seriesLen
if (w.globals.isXNumeric) {
yDivision = w.globals.gridHeight / this.barCtx.totalItems
barHeight = yDivision / this.barCtx.seriesLen
}
barHeight =
(barHeight * parseInt(this.barCtx.barOptions.barHeight, 10)) / 100
zeroW =
this.barCtx.baseLineInvertedY +
w.globals.padHorizontal +
(this.barCtx.isReversed ? w.globals.gridWidth : 0) -
(this.barCtx.isReversed ? this.barCtx.baseLineInvertedY * 2 : 0)
y = (yDivision - barHeight * this.barCtx.seriesLen) / 2
} else {
// width divided into equal parts
xDivision = w.globals.gridWidth / this.barCtx.visibleItems
if (w.config.xaxis.convertedCatToNumeric) {
xDivision = w.globals.gridWidth / w.globals.dataPoints
}
barWidth =
((xDivision / this.barCtx.seriesLen) *
parseInt(this.barCtx.barOptions.columnWidth, 10)) /
100
if (w.globals.isXNumeric) {
// max barwidth should be equal to minXDiff to avoid overlap
let xRatio = this.barCtx.xRatio
if (w.config.xaxis.convertedCatToNumeric) {
xRatio = this.barCtx.initialXRatio
}
if (
w.globals.minXDiff &&
w.globals.minXDiff !== 0.5 &&
w.globals.minXDiff / xRatio > 0
) {
xDivision = w.globals.minXDiff / xRatio
}
barWidth =
((xDivision / this.barCtx.seriesLen) *
parseInt(this.barCtx.barOptions.columnWidth, 10)) /
100
if (barWidth < 1) {
barWidth = 1
}
}
zeroH =
w.globals.gridHeight -
this.barCtx.baseLineY[this.barCtx.yaxisIndex] -
(this.barCtx.isReversed ? w.globals.gridHeight : 0) +
(this.barCtx.isReversed
? this.barCtx.baseLineY[this.barCtx.yaxisIndex] * 2
: 0)
x =
w.globals.padHorizontal +
(xDivision - barWidth * this.barCtx.seriesLen) / 2
}
return {
x,
y,
yDivision,
xDivision,
barHeight,
barWidth,
zeroH,
zeroW
}
}
getPathFillColor(series, i, j, realIndex) {
const w = this.w
let fill = new Fill(this.barCtx.ctx)
let fillColor = null
let seriesNumber = this.barCtx.barOptions.distributed ? j : i
if (this.barCtx.barOptions.colors.ranges.length > 0) {
const colorRange = this.barCtx.barOptions.colors.ranges
colorRange.map((range) => {
if (series[i][j] >= range.from && series[i][j] <= range.to) {
fillColor = range.color
}
})
}
if (w.config.series[i].data[j] && w.config.series[i].data[j].fillColor) {
fillColor = w.config.series[i].data[j].fillColor
}
let pathFill = fill.fillPath({
seriesNumber: this.barCtx.barOptions.distributed
? seriesNumber
: realIndex,
dataPointIndex: j,
color: fillColor,
value: series[i][j]
})
return pathFill
}
getStrokeWidth(i, j, realIndex) {
let strokeWidth = 0
const w = this.w
if (
typeof this.barCtx.series[i][j] === 'undefined' ||
this.barCtx.series[i][j] === null
) {
this.barCtx.isNullValue = true
} else {
this.barCtx.isNullValue = false
}
if (w.config.stroke.show) {
if (!this.barCtx.isNullValue) {
strokeWidth = Array.isArray(this.barCtx.strokeWidth)
? this.barCtx.strokeWidth[realIndex]
: this.barCtx.strokeWidth
}
}
return strokeWidth
}
barBackground({ j, i, x1, x2, y1, y2, elSeries }) {
const w = this.w
const graphics = new Graphics(this.barCtx.ctx)
const sr = new Series(this.barCtx.ctx)
let activeSeriesIndex = sr.getActiveConfigSeriesIndex()
if (
this.barCtx.barOptions.colors.backgroundBarColors.length > 0 &&
activeSeriesIndex === i
) {
if (j >= this.barCtx.barOptions.colors.backgroundBarColors.length) {
j %= this.barCtx.barOptions.colors.backgroundBarColors.length
}
let bcolor = this.barCtx.barOptions.colors.backgroundBarColors[j]
let rect = graphics.drawRect(
typeof x1 !== 'undefined' ? x1 : 0,
typeof y1 !== 'undefined' ? y1 : 0,
typeof x2 !== 'undefined' ? x2 : w.globals.gridWidth,
typeof y2 !== 'undefined' ? y2 : w.globals.gridHeight,
this.barCtx.barOptions.colors.backgroundBarRadius,
bcolor,
this.barCtx.barOptions.colors.backgroundBarOpacity
)
elSeries.add(rect)
rect.node.classList.add('apexcharts-backgroundBar')
}
}
getColumnPaths({
barWidth,
barXPosition,
yRatio,
y1,
y2,
strokeWidth,
series,
realIndex,
i,
j,
w
}) {
const graphics = new Graphics(this.barCtx.ctx)
strokeWidth = Array.isArray(strokeWidth)
? strokeWidth[realIndex]
: strokeWidth
if (!strokeWidth) strokeWidth = 0
let shapeOpts = {
barWidth,
strokeWidth,
yRatio,
barXPosition,
y1,
y2
}
let newPath = this.getRoundedBars(w, shapeOpts, series, i, j)
const x1 = barXPosition
const x2 = barXPosition + barWidth
let pathTo = graphics.move(x1, y1)
let pathFrom = graphics.move(x1, y1)
const sl = graphics.line(x2 - strokeWidth, y1)
if (w.globals.previousPaths.length > 0) {
pathFrom = this.barCtx.getPreviousPath(realIndex, j, false)
}
pathTo =
pathTo +
graphics.line(x1, newPath.y2) +
newPath.pathWithRadius +
graphics.line(x2 - strokeWidth, newPath.y2) +
sl +
sl +
'z'
// the lines in pathFrom are repeated to equal it to the points of pathTo
// this is to avoid weird animation (bug in svg.js)
pathFrom =
pathFrom +
graphics.line(x1, y1) +
sl +
sl +
sl +
sl +
sl +
graphics.line(x1, y1)
if (w.config.chart.stacked) {
this.barCtx.yArrj.push(newPath.y2)
this.barCtx.yArrjF.push(Math.abs(y1 - newPath.y2))
this.barCtx.yArrjVal.push(this.barCtx.series[i][j])
}
return {
pathTo,
pathFrom
}
}
getBarpaths({
barYPosition,
barHeight,
x1,
x2,
strokeWidth,
series,
realIndex,
i,
j,
w
}) {
const graphics = new Graphics(this.barCtx.ctx)
strokeWidth = Array.isArray(strokeWidth)
? strokeWidth[realIndex]
: strokeWidth
if (!strokeWidth) strokeWidth = 0
let shapeOpts = {
barHeight,
strokeWidth,
barYPosition,
x2,
x1
}
let newPath = this.getRoundedBars(w, shapeOpts, series, i, j)
let pathTo = graphics.move(x1, barYPosition)
let pathFrom = graphics.move(x1, barYPosition)
if (w.globals.previousPaths.length > 0) {
pathFrom = this.barCtx.getPreviousPath(realIndex, j, false)
}
const y1 = barYPosition
const y2 = barYPosition + barHeight
const sl = graphics.line(x1, y2 - strokeWidth)
pathTo =
pathTo +
graphics.line(newPath.x2, y1) +
newPath.pathWithRadius +
graphics.line(newPath.x2, y2 - strokeWidth) +
sl +
sl +
'z'
pathFrom =
pathFrom +
graphics.line(x1, y1) +
sl +
sl +
sl +
sl +
sl +
graphics.line(x1, y1)
if (w.config.chart.stacked) {
this.barCtx.xArrj.push(newPath.x2)
this.barCtx.xArrjF.push(Math.abs(x1 - newPath.x2))
this.barCtx.xArrjVal.push(this.barCtx.series[i][j])
}
return {
pathTo,
pathFrom
}
}
/** getRoundedBars draws border radius for bars/columns
* @memberof Bar
* @param {object} w - chart context
* @param {object} opts - consists several properties like barHeight/barWidth
* @param {array} series - global primary series
* @param {int} i - current iterating series's index
* @param {int} j - series's j of i
* @return {object} pathWithRadius - ending shape path string
* newY/newX - which is calculated from existing x/y based on rounded border
**/
getRoundedBars(w, opts, series, i, j) {
let graphics = new Graphics(this.barCtx.ctx)
let radius = 0
const borderRadius = w.config.plotOptions.bar.borderRadius
const borderRadiusIsArray = Array.isArray(borderRadius)
if (borderRadiusIsArray) {
const radiusIndex =
i > borderRadius.length - 1 ? borderRadius.length - 1 : i
radius = borderRadius[radiusIndex]
} else {
radius = borderRadius
}
if (
w.config.chart.stacked &&
series.length > 1 &&
i !== this.barCtx.radiusOnSeriesNumber &&
!borderRadiusIsArray
) {
radius = 0
}
if (this.barCtx.isHorizontal) {
let pathWithRadius = ''
let x2 = opts.x2
if (Math.abs(opts.x1 - opts.x2) < radius) {
radius = Math.abs(opts.x1 - opts.x2)
}
if (typeof series[i][j] !== 'undefined' || series[i][j] !== null) {
let inverse = this.barCtx.isReversed
? series[i][j] > 0
: series[i][j] < 0
if (inverse) radius = radius * -1
x2 = x2 - radius
pathWithRadius =
graphics.quadraticCurve(
x2 + radius,
opts.barYPosition,
x2 + radius,
opts.barYPosition + (!inverse ? radius : radius * -1)
) +
graphics.line(
x2 + radius,
opts.barYPosition +
opts.barHeight -
opts.strokeWidth -
(!inverse ? radius : radius * -1)
) +
graphics.quadraticCurve(
x2 + radius,
opts.barYPosition + opts.barHeight - opts.strokeWidth,
x2,
opts.barYPosition + opts.barHeight - opts.strokeWidth
)
}
return {
pathWithRadius,
x2
}
} else {
let pathWithRadius = ''
let y2 = opts.y2
if (Math.abs(opts.y1 - opts.y2) < radius) {
radius = Math.abs(opts.y1 - opts.y2)
}
if (typeof series[i][j] !== 'undefined' || series[i][j] !== null) {
let inverse = series[i][j] < 0
if (inverse) radius = radius * -1
y2 = y2 + radius
pathWithRadius =
graphics.quadraticCurve(
opts.barXPosition,
y2 - radius,
opts.barXPosition + (!inverse ? radius : radius * -1),
y2 - radius
) +
graphics.line(
opts.barXPosition +
opts.barWidth -
opts.strokeWidth -
(!inverse ? radius : radius * -1),
y2 - radius
) +
graphics.quadraticCurve(
opts.barXPosition + opts.barWidth - opts.strokeWidth,
y2 - radius,
opts.barXPosition + opts.barWidth - opts.strokeWidth,
y2
)
}
return {
pathWithRadius,
y2
}
}
}
checkZeroSeries({ series }) {
let w = this.w
for (let zs = 0; zs < series.length; zs++) {
let total = 0
for (
let zsj = 0;
zsj < series[w.globals.maxValsInArrayIndex].length;
zsj++
) {
total += series[zs][zsj]
}
if (total === 0) {
this.barCtx.zeroSerieses.push(zs)
}
}
// After getting all zeroserieses, we need to ensure whether radiusOnSeriesNumber is not in that zeroseries array
for (let s = series.length - 1; s >= 0; s--) {
if (
this.barCtx.zeroSerieses.indexOf(s) > -1 &&
s === this.radiusOnSeriesNumber
) {
this.barCtx.radiusOnSeriesNumber -= 1
}
}
for (let s = series.length - 1; s >= 0; s--) {
if (
w.globals.collapsedSeriesIndices.indexOf(
this.barCtx.radiusOnSeriesNumber
) > -1
) {
this.barCtx.radiusOnSeriesNumber -= 1
}
}
}
getXForValue(value, zeroW, zeroPositionForNull = true) {
let xForVal = zeroPositionForNull ? zeroW : null
if (typeof value !== 'undefined' && value !== null) {
xForVal =
zeroW +
value / this.barCtx.invertedYRatio -
(this.barCtx.isReversed ? value / this.barCtx.invertedYRatio : 0) * 2
}
return xForVal
}
getYForValue(value, zeroH, zeroPositionForNull = true) {
let yForVal = zeroPositionForNull ? zeroH : null
if (typeof value !== 'undefined' && value !== null) {
yForVal =
zeroH -
value / this.barCtx.yRatio[this.barCtx.yaxisIndex] +
(this.barCtx.isReversed
? value / this.barCtx.yRatio[this.barCtx.yaxisIndex]
: 0) *
2
}
return yForVal
}
getGoalValues(type, zeroW, zeroH, i, j) {
const w = this.w
let goals = []
if (
w.globals.seriesGoals[i] &&
w.globals.seriesGoals[i][j] &&
Array.isArray(w.globals.seriesGoals[i][j])
) {
w.globals.seriesGoals[i][j].forEach((goal) => {
goals.push({
[type]:
type === 'x'
? this.getXForValue(goal.value, zeroW, false)
: this.getYForValue(goal.value, zeroH, false),
attrs: goal
})
})
}
return goals
}
drawGoalLine({
barXPosition,
barYPosition,
goalX,
goalY,
barWidth,
barHeight
}) {
let graphics = new Graphics(this.barCtx.ctx)
const lineGroup = graphics.group({
className: 'apexcharts-bar-goals-groups'
})
let line = null
if (this.barCtx.isHorizontal) {
if (Array.isArray(goalX)) {
goalX.forEach((goal) => {
let sHeight =
typeof goal.attrs.strokeHeight !== 'undefined'
? goal.attrs.strokeHeight
: barHeight / 2
let y = barYPosition + sHeight + barHeight / 2
line = graphics.drawLine(
goal.x,
y - sHeight * 2,
goal.x,
y,
goal.attrs.strokeColor ? goal.attrs.strokeColor : undefined,
goal.attrs.strokeDashArray,
goal.attrs.strokeWidth ? goal.attrs.strokeWidth : 2,
goal.attrs.strokeLineCap
)
lineGroup.add(line)
})
}
} else {
if (Array.isArray(goalY)) {
goalY.forEach((goal) => {
let sWidth =
typeof goal.attrs.strokeWidth !== 'undefined'
? goal.attrs.strokeWidth
: barWidth / 2
let x = barXPosition + sWidth + barWidth / 2
line = graphics.drawLine(
x - sWidth * 2,
goal.y,
x,
goal.y,
goal.attrs.strokeColor ? goal.attrs.strokeColor : undefined,
goal.attrs.strokeDashArray,
goal.attrs.strokeHeight ? goal.attrs.strokeHeight : 2,
goal.attrs.strokeLineCap
)
lineGroup.add(line)
})
}
}
return lineGroup
}
}

View File

@@ -1,30 +0,0 @@
import Graphics from '../../../modules/Graphics'
export default class CircularChartsHelpers {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
drawYAxisTexts(x, y, i, text) {
const w = this.w
const yaxisConfig = w.config.yaxis[0]
const formatter = w.globals.yLabelFormatters[0]
const graphics = new Graphics(this.ctx)
const yaxisLabel = graphics.drawText({
x: x + yaxisConfig.labels.offsetX,
y: y + yaxisConfig.labels.offsetY,
text: formatter(text, i),
textAnchor: 'middle',
fontSize: yaxisConfig.labels.style.fontSize,
fontFamily: yaxisConfig.labels.style.fontFamily,
foreColor: Array.isArray(yaxisConfig.labels.style.colors)
? yaxisConfig.labels.style.colors[i]
: yaxisConfig.labels.style.colors
})
return yaxisLabel
}
}

View File

@@ -1,149 +0,0 @@
import CoreUtils from '../../../modules/CoreUtils'
import Utils from '../../../utils/Utils'
export default class Helpers {
constructor(lineCtx) {
this.w = lineCtx.w
this.lineCtx = lineCtx
}
sameValueSeriesFix(i, series) {
const w = this.w
if (
w.config.chart.type === 'line' &&
(w.config.fill.type === 'gradient' ||
w.config.fill.type[i] === 'gradient')
) {
const coreUtils = new CoreUtils(this.lineCtx.ctx, w)
// a small adjustment to allow gradient line to draw correctly for all same values
/* #fix https://github.com/apexcharts/apexcharts.js/issues/358 */
if (coreUtils.seriesHaveSameValues(i)) {
let gSeries = series[i].slice()
gSeries[gSeries.length - 1] = gSeries[gSeries.length - 1] + 0.000001
series[i] = gSeries
}
}
return series
}
calculatePoints({ series, realIndex, x, y, i, j, prevY }) {
let w = this.w
let ptX = []
let ptY = []
if (j === 0) {
let xPT1st =
this.lineCtx.categoryAxisCorrection + w.config.markers.offsetX
// the first point for line series
// we need to check whether it's not a time series, because a time series may
// start from the middle of the x axis
if (w.globals.isXNumeric) {
xPT1st =
(w.globals.seriesX[realIndex][0] - w.globals.minX) /
this.lineCtx.xRatio +
w.config.markers.offsetX
}
// push 2 points for the first data values
ptX.push(xPT1st)
ptY.push(
Utils.isNumber(series[i][0]) ? prevY + w.config.markers.offsetY : null
)
ptX.push(x + w.config.markers.offsetX)
ptY.push(
Utils.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null
)
} else {
ptX.push(x + w.config.markers.offsetX)
ptY.push(
Utils.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null
)
}
let pointsPos = {
x: ptX,
y: ptY
}
return pointsPos
}
checkPreviousPaths({ pathFromLine, pathFromArea, realIndex }) {
let w = this.w
for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
let gpp = w.globals.previousPaths[pp]
if (
(gpp.type === 'line' || gpp.type === 'area') &&
gpp.paths.length > 0 &&
parseInt(gpp.realIndex, 10) === parseInt(realIndex, 10)
) {
if (gpp.type === 'line') {
this.lineCtx.appendPathFrom = false
pathFromLine = w.globals.previousPaths[pp].paths[0].d
} else if (gpp.type === 'area') {
this.lineCtx.appendPathFrom = false
pathFromArea = w.globals.previousPaths[pp].paths[0].d
if (w.config.stroke.show && w.globals.previousPaths[pp].paths[1]) {
pathFromLine = w.globals.previousPaths[pp].paths[1].d
}
}
}
}
return {
pathFromLine,
pathFromArea
}
}
determineFirstPrevY({ i, series, prevY, lineYPosition }) {
let w = this.w
if (typeof series[i][0] !== 'undefined') {
if (w.config.chart.stacked) {
if (i > 0) {
// 1st y value of previous series
lineYPosition = this.lineCtx.prevSeriesY[i - 1][0]
} else {
// the first series will not have prevY values
lineYPosition = this.lineCtx.zeroY
}
} else {
lineYPosition = this.lineCtx.zeroY
}
prevY =
lineYPosition -
series[i][0] / this.lineCtx.yRatio[this.lineCtx.yaxisIndex] +
(this.lineCtx.isReversed
? series[i][0] / this.lineCtx.yRatio[this.lineCtx.yaxisIndex]
: 0) *
2
} else {
// the first value in the current series is null
if (
w.config.chart.stacked &&
i > 0 &&
typeof series[i][0] === 'undefined'
) {
// check for undefined value (undefined value will occur when we clear the series while user clicks on legend to hide serieses)
for (let s = i - 1; s >= 0; s--) {
// for loop to get to 1st previous value until we get it
if (series[s][0] !== null && typeof series[s][0] !== 'undefined') {
lineYPosition = this.lineCtx.prevSeriesY[s][0]
prevY = lineYPosition
break
}
}
}
}
return {
prevY,
lineYPosition
}
}
}

View File

@@ -1,192 +0,0 @@
import Utils from '../../../utils/Utils'
import Graphics from '../../../modules/Graphics'
import DataLabels from '../../../modules/DataLabels'
export default class TreemapHelpers {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
checkColorRange() {
const w = this.w
let negRange = false
let chartOpts = w.config.plotOptions[w.config.chart.type]
if (chartOpts.colorScale.ranges.length > 0) {
chartOpts.colorScale.ranges.map((range, index) => {
if (range.from <= 0) {
negRange = true
}
})
}
return negRange
}
getShadeColor(chartType, i, j, negRange) {
const w = this.w
let colorShadePercent = 1
let shadeIntensity = w.config.plotOptions[chartType].shadeIntensity
const colorProps = this.determineColor(chartType, i, j)
if (w.globals.hasNegs || negRange) {
if (w.config.plotOptions[chartType].reverseNegativeShade) {
if (colorProps.percent < 0) {
colorShadePercent =
(colorProps.percent / 100) * (shadeIntensity * 1.25)
} else {
colorShadePercent =
(1 - colorProps.percent / 100) * (shadeIntensity * 1.25)
}
} else {
if (colorProps.percent <= 0) {
colorShadePercent =
1 - (1 + colorProps.percent / 100) * shadeIntensity
} else {
colorShadePercent = (1 - colorProps.percent / 100) * shadeIntensity
}
}
} else {
colorShadePercent = 1 - colorProps.percent / 100
if (chartType === 'treemap') {
colorShadePercent =
(1 - colorProps.percent / 100) * (shadeIntensity * 1.25)
}
}
let color = colorProps.color
let utils = new Utils()
if (w.config.plotOptions[chartType].enableShades) {
if (this.w.config.theme.mode === 'dark') {
color = Utils.hexToRgba(
utils.shadeColor(colorShadePercent * -1, colorProps.color),
w.config.fill.opacity
)
} else {
color = Utils.hexToRgba(
utils.shadeColor(colorShadePercent, colorProps.color),
w.config.fill.opacity
)
}
}
return { color, colorProps }
}
determineColor(chartType, i, j) {
const w = this.w
let val = w.globals.series[i][j]
let chartOpts = w.config.plotOptions[chartType]
let seriesNumber = chartOpts.colorScale.inverse ? j : i
if (chartOpts.distributed && w.config.chart.type === 'treemap') {
seriesNumber = j
}
let color = w.globals.colors[seriesNumber]
let foreColor = null
let min = Math.min(...w.globals.series[i])
let max = Math.max(...w.globals.series[i])
if (!chartOpts.distributed && chartType === 'heatmap') {
min = w.globals.minY
max = w.globals.maxY
}
if (typeof chartOpts.colorScale.min !== 'undefined') {
min =
chartOpts.colorScale.min < w.globals.minY
? chartOpts.colorScale.min
: w.globals.minY
max =
chartOpts.colorScale.max > w.globals.maxY
? chartOpts.colorScale.max
: w.globals.maxY
}
let total = Math.abs(max) + Math.abs(min)
let percent = (100 * val) / (total === 0 ? total - 0.000001 : total)
if (chartOpts.colorScale.ranges.length > 0) {
const colorRange = chartOpts.colorScale.ranges
colorRange.map((range, index) => {
if (val >= range.from && val <= range.to) {
color = range.color
foreColor = range.foreColor ? range.foreColor : null
min = range.from
max = range.to
let rTotal = Math.abs(max) + Math.abs(min)
percent = (100 * val) / (rTotal === 0 ? rTotal - 0.000001 : rTotal)
}
})
}
return {
color,
foreColor,
percent
}
}
calculateDataLabels({ text, x, y, i, j, colorProps, fontSize }) {
let w = this.w
let dataLabelsConfig = w.config.dataLabels
const graphics = new Graphics(this.ctx)
let dataLabels = new DataLabels(this.ctx)
let elDataLabelsWrap = null
if (dataLabelsConfig.enabled) {
elDataLabelsWrap = graphics.group({
class: 'apexcharts-data-labels'
})
const offX = dataLabelsConfig.offsetX
const offY = dataLabelsConfig.offsetY
let dataLabelsX = x + offX
let dataLabelsY =
y + parseFloat(dataLabelsConfig.style.fontSize) / 3 + offY
dataLabels.plotDataLabelsText({
x: dataLabelsX,
y: dataLabelsY,
text,
i,
j,
color: colorProps.foreColor,
parent: elDataLabelsWrap,
fontSize,
dataLabelsConfig
})
}
return elDataLabelsWrap
}
addListeners(elRect) {
const graphics = new Graphics(this.ctx)
elRect.node.addEventListener(
'mouseenter',
graphics.pathMouseEnter.bind(this, elRect)
)
elRect.node.addEventListener(
'mouseleave',
graphics.pathMouseLeave.bind(this, elRect)
)
elRect.node.addEventListener(
'mousedown',
graphics.pathMouseDown.bind(this, elRect)
)
}
}

View File

@@ -1,290 +0,0 @@
/*
* treemap-squarify.js - open source implementation of squarified treemaps
*
* Treemap Squared 0.5 - Treemap Charting library
*
* https://github.com/imranghory/treemap-squared/
*
* Copyright (c) 2012 Imran Ghory (imranghory@gmail.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*
*
* Implementation of the squarify treemap algorithm described in:
*
* Bruls, Mark; Huizing, Kees; van Wijk, Jarke J. (2000), "Squarified treemaps"
* in de Leeuw, W.; van Liere, R., Data Visualization 2000:
* Proc. Joint Eurographics and IEEE TCVG Symp. on Visualization, Springer-Verlag, pp. 3342.
*
* Paper is available online at: http://www.win.tue.nl/~vanwijk/stm.pdf
*
* The code in this file is completeley decoupled from the drawing code so it should be trivial
* to port it to any other vector drawing library. Given an array of datapoints this library returns
* an array of cartesian coordinates that represent the rectangles that make up the treemap.
*
* The library also supports multidimensional data (nested treemaps) and performs normalization on the data.
*
* See the README file for more details.
*/
window.TreemapSquared = {}
;(function() {
'use strict'
window.TreemapSquared.generate = (function() {
function Container(xoffset, yoffset, width, height) {
this.xoffset = xoffset // offset from the the top left hand corner
this.yoffset = yoffset // ditto
this.height = height
this.width = width
this.shortestEdge = function() {
return Math.min(this.height, this.width)
}
// getCoordinates - for a row of boxes which we've placed
// return an array of their cartesian coordinates
this.getCoordinates = function(row) {
let coordinates = []
let subxoffset = this.xoffset,
subyoffset = this.yoffset //our offset within the container
let areawidth = sumArray(row) / this.height
let areaheight = sumArray(row) / this.width
let i
if (this.width >= this.height) {
for (i = 0; i < row.length; i++) {
coordinates.push([
subxoffset,
subyoffset,
subxoffset + areawidth,
subyoffset + row[i] / areawidth
])
subyoffset = subyoffset + row[i] / areawidth
}
} else {
for (i = 0; i < row.length; i++) {
coordinates.push([
subxoffset,
subyoffset,
subxoffset + row[i] / areaheight,
subyoffset + areaheight
])
subxoffset = subxoffset + row[i] / areaheight
}
}
return coordinates
}
// cutArea - once we've placed some boxes into an row we then need to identify the remaining area,
// this function takes the area of the boxes we've placed and calculates the location and
// dimensions of the remaining space and returns a container box defined by the remaining area
this.cutArea = function(area) {
let newcontainer
if (this.width >= this.height) {
let areawidth = area / this.height
let newwidth = this.width - areawidth
newcontainer = new Container(
this.xoffset + areawidth,
this.yoffset,
newwidth,
this.height
)
} else {
let areaheight = area / this.width
let newheight = this.height - areaheight
newcontainer = new Container(
this.xoffset,
this.yoffset + areaheight,
this.width,
newheight
)
}
return newcontainer
}
}
// normalize - the Bruls algorithm assumes we're passing in areas that nicely fit into our
// container box, this method takes our raw data and normalizes the data values into
// area values so that this assumption is valid.
function normalize(data, area) {
let normalizeddata = []
let sum = sumArray(data)
let multiplier = area / sum
let i
for (i = 0; i < data.length; i++) {
normalizeddata[i] = data[i] * multiplier
}
return normalizeddata
}
// treemapMultidimensional - takes multidimensional data (aka [[23,11],[11,32]] - nested array)
// and recursively calls itself using treemapSingledimensional
// to create a patchwork of treemaps and merge them
function treemapMultidimensional(data, width, height, xoffset, yoffset) {
xoffset = typeof xoffset === 'undefined' ? 0 : xoffset
yoffset = typeof yoffset === 'undefined' ? 0 : yoffset
let mergeddata = []
let mergedtreemap
let results = []
let i
if (isArray(data[0])) {
// if we've got more dimensions of depth
for (i = 0; i < data.length; i++) {
mergeddata[i] = sumMultidimensionalArray(data[i])
}
mergedtreemap = treemapSingledimensional(
mergeddata,
width,
height,
xoffset,
yoffset
)
for (i = 0; i < data.length; i++) {
results.push(
treemapMultidimensional(
data[i],
mergedtreemap[i][2] - mergedtreemap[i][0],
mergedtreemap[i][3] - mergedtreemap[i][1],
mergedtreemap[i][0],
mergedtreemap[i][1]
)
)
}
} else {
results = treemapSingledimensional(
data,
width,
height,
xoffset,
yoffset
)
}
return results
}
// treemapSingledimensional - simple wrapper around squarify
function treemapSingledimensional(data, width, height, xoffset, yoffset) {
xoffset = typeof xoffset === 'undefined' ? 0 : xoffset
yoffset = typeof yoffset === 'undefined' ? 0 : yoffset
let rawtreemap = squarify(
normalize(data, width * height),
[],
new Container(xoffset, yoffset, width, height),
[]
)
return flattenTreemap(rawtreemap)
}
// flattenTreemap - squarify implementation returns an array of arrays of coordinates
// because we have a new array everytime we switch to building a new row
// this converts it into an array of coordinates.
function flattenTreemap(rawtreemap) {
let flattreemap = []
let i, j
for (i = 0; i < rawtreemap.length; i++) {
for (j = 0; j < rawtreemap[i].length; j++) {
flattreemap.push(rawtreemap[i][j])
}
}
return flattreemap
}
// squarify - as per the Bruls paper
// plus coordinates stack and containers so we get
// usable data out of it
function squarify(data, currentrow, container, stack) {
let length
let nextdatapoint
let newcontainer
if (data.length === 0) {
stack.push(container.getCoordinates(currentrow))
return
}
length = container.shortestEdge()
nextdatapoint = data[0]
if (improvesRatio(currentrow, nextdatapoint, length)) {
currentrow.push(nextdatapoint)
squarify(data.slice(1), currentrow, container, stack)
} else {
newcontainer = container.cutArea(sumArray(currentrow), stack)
stack.push(container.getCoordinates(currentrow))
squarify(data, [], newcontainer, stack)
}
return stack
}
// improveRatio - implements the worse calculation and comparision as given in Bruls
// (note the error in the original paper; fixed here)
function improvesRatio(currentrow, nextnode, length) {
let newrow
if (currentrow.length === 0) {
return true
}
newrow = currentrow.slice()
newrow.push(nextnode)
let currentratio = calculateRatio(currentrow, length)
let newratio = calculateRatio(newrow, length)
// the pseudocode in the Bruls paper has the direction of the comparison
// wrong, this is the correct one.
return currentratio >= newratio
}
// calculateRatio - calculates the maximum width to height ratio of the
// boxes in this row
function calculateRatio(row, length) {
let min = Math.min.apply(Math, row)
let max = Math.max.apply(Math, row)
let sum = sumArray(row)
return Math.max(
(Math.pow(length, 2) * max) / Math.pow(sum, 2),
Math.pow(sum, 2) / (Math.pow(length, 2) * min)
)
}
// isArray - checks if arr is an array
function isArray(arr) {
return arr && arr.constructor === Array
}
// sumArray - sums a single dimensional array
function sumArray(arr) {
let sum = 0
let i
for (i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
// sumMultidimensionalArray - sums the values in a nested array (aka [[0,1],[[2,3]]])
function sumMultidimensionalArray(arr) {
let i,
total = 0
if (isArray(arr[0])) {
for (i = 0; i < arr.length; i++) {
total += sumMultidimensionalArray(arr[i])
}
} else {
total = sumArray(arr)
}
return total
}
return treemapMultidimensional
})()
})()

View File

@@ -1,63 +0,0 @@
{
"name": "ar",
"options": {
"months": [
"يناير",
"فبراير",
"مارس",
"أبريل",
"مايو",
"يونيو",
"يوليو",
"أغسطس",
"سبتمبر",
"أكتوبر",
"نوفمبر",
"ديسمبر"
],
"shortMonths": [
"يناير",
"فبراير",
"مارس",
"أبريل",
"مايو",
"يونيو",
"يوليو",
"أغسطس",
"سبتمبر",
"أكتوبر",
"نوفمبر",
"ديسمبر"
],
"days": [
"الأحد",
"الإثنين",
"الثلاثاء",
"الأربعاء",
"الخميس",
"الجمعة",
"السبت"
],
"shortDays": [
"أحد",
"إثنين",
"ثلاثاء",
"أربعاء",
"خميس",
"جمعة",
"سبت"
],
"toolbar": {
"exportToSVG": "تحميل بصيغة SVG",
"exportToPNG": "تحميل بصيغة PNG",
"exportToCSV": "تحميل بصيغة CSV",
"menu": "القائمة",
"selection": "تحديد",
"selectionZoom": "تكبير التحديد",
"zoomIn": "تكبير",
"zoomOut": "تصغير",
"pan": "تحريك",
"reset": "إعادة التعيين"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "ca",
"options": {
"months": [
"Gener",
"Febrer",
"Març",
"Abril",
"Maig",
"Juny",
"Juliol",
"Agost",
"Setembre",
"Octubre",
"Novembre",
"Desembre"
],
"shortMonths": [
"Gen.",
"Febr.",
"Març",
"Abr.",
"Maig",
"Juny",
"Jul.",
"Ag.",
"Set.",
"Oct.",
"Nov.",
"Des."
],
"days": [
"Diumenge",
"Dilluns",
"Dimarts",
"Dimecres",
"Dijous",
"Divendres",
"Dissabte"
],
"shortDays": ["Dg", "Dl", "Dt", "Dc", "Dj", "Dv", "Ds"],
"toolbar": {
"exportToSVG": "Descarregar SVG",
"exportToPNG": "Descarregar PNG",
"exportToCSV": "Descarregar CSV",
"menu": "Menú",
"selection": "Seleccionar",
"selectionZoom": "Seleccionar Zoom",
"zoomIn": "Augmentar",
"zoomOut": "Disminuir",
"pan": "Navegació",
"reset": "Reiniciar Zoom"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "cs",
"options": {
"months": [
"Leden",
"Únor",
"Březen",
"Duben",
"Květen",
"Červen",
"Červenec",
"Srpen",
"Září",
"Říjen",
"Listopad",
"Prosinec"
],
"shortMonths": [
"Led",
"Úno",
"Bře",
"Dub",
"Kvě",
"Čvn",
"Čvc",
"Srp",
"Zář",
"Říj",
"Lis",
"Pro"
],
"days": [
"Neděle",
"Pondělí",
"Úterý",
"Středa",
"Čtvrtek",
"Pátek",
"Sobota"
],
"shortDays": ["Ne", "Po", "Út", "St", "Čt", "Pá", "So"],
"toolbar": {
"exportToSVG": "Stáhnout SVG",
"exportToPNG": "Stáhnout PNG",
"exportToCSV": "Stáhnout CSV",
"menu": "Menu",
"selection": "Vybrat",
"selectionZoom": "Zoom: Vybrat",
"zoomIn": "Zoom: Přiblížit",
"zoomOut": "Zoom: Oddálit",
"pan": "Přesouvat",
"reset": "Resetovat"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "de",
"options": {
"months": [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
"shortMonths": [
"Jan",
"Feb",
"Mär",
"Apr",
"Mai",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dez"
],
"days": [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag"
],
"shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
"toolbar": {
"exportToSVG": "SVG speichern",
"exportToPNG": "PNG speichern",
"exportToCSV": "CSV speichern",
"menu": "Menü",
"selection": "Auswahl",
"selectionZoom": "Auswahl vergrößern",
"zoomIn": "Vergrößern",
"zoomOut": "Verkleinern",
"pan": "Verschieben",
"reset": "Zoom zurücksetzen"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "el",
"options": {
"months": [
"Ιανουάριος",
"Φεβρουάριος",
"Μάρτιος",
"Απρίλιος",
"Μάιος",
"Ιούνιος",
"Ιούλιος",
"Αύγουστος",
"Σεπτέμβριος",
"Οκτώβριος",
"Νοέμβριος",
"Δεκέμβριος"
],
"shortMonths": [
"Ιαν",
"Φευ",
"Μαρ",
"Απρ",
"Μάι",
"Ιουν",
"Ιουλ",
"Αυγ",
"Σεπ",
"Οκτ",
"Νοε",
"Δεκ"
],
"days": [
"Κυριακή",
"Δευτέρα",
"Τρίτη",
"Τετάρτη",
"Πέμπτη",
"Παρασκευή",
"Σάββατο"
],
"shortDays": ["Κυρ", "Δευ", "Τρι", "Τετ", "Πεμ", "Παρ", "Σαβ"],
"toolbar": {
"exportToSVG": "Λήψη SVG",
"exportToPNG": "Λήψη PNG",
"exportToCSV": "Λήψη CSV",
"menu": "Menu",
"selection": "Επιλογή",
"selectionZoom": "Μεγένθυση βάση επιλογής",
"zoomIn": "Μεγένθυνση",
"zoomOut": "Σμίκρυνση",
"pan": "Μετατόπιση",
"reset": "Επαναφορά μεγένθυνσης"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "en",
"options": {
"months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"shortMonths": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"days": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
"toolbar": {
"exportToSVG": "Download SVG",
"exportToPNG": "Download PNG",
"exportToCSV": "Download CSV",
"menu": "Menu",
"selection": "Selection",
"selectionZoom": "Selection Zoom",
"zoomIn": "Zoom In",
"zoomOut": "Zoom Out",
"pan": "Panning",
"reset": "Reset Zoom"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "es",
"options": {
"months": [
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre"
],
"shortMonths": [
"Ene",
"Feb",
"Mar",
"Abr",
"May",
"Jun",
"Jul",
"Ago",
"Sep",
"Oct",
"Nov",
"Dic"
],
"days": [
"Domingo",
"Lunes",
"Martes",
"Miércoles",
"Jueves",
"Viernes",
"Sábado"
],
"shortDays": ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
"toolbar": {
"exportToSVG": "Descargar SVG",
"exportToPNG": "Descargar PNG",
"exportToCSV": "Descargar CSV",
"menu": "Menu",
"selection": "Seleccionar",
"selectionZoom": "Seleccionar Zoom",
"zoomIn": "Aumentar",
"zoomOut": "Disminuir",
"pan": "Navegación",
"reset": "Reiniciar Zoom"
}
}
}

View File

@@ -1,63 +0,0 @@
{
"name": "et",
"options": {
"months": [
"jaanuar",
"veebruar",
"märts",
"aprill",
"mai",
"juuni",
"juuli",
"august",
"september",
"oktoober",
"november",
"detsember"
],
"shortMonths": [
"jaan",
"veebr",
"märts",
"apr",
"mai",
"juuni",
"juuli",
"aug",
"sept",
"okt",
"nov",
"dets"
],
"days": [
"pühapäev",
"esmaspäev",
"teisipäev",
"kolmapäev",
"neljapäev",
"reede",
"laupäev"
],
"shortDays": [
"P",
"E",
"T",
"K",
"N",
"R",
"L"
],
"toolbar": {
"exportToSVG": "Lae alla SVG",
"exportToPNG": "Lae alla PNG",
"exportToCSV": "Lae alla CSV",
"menu": "Menüü",
"selection": "Valik",
"selectionZoom": "Valiku suum",
"zoomIn": "Suurenda",
"zoomOut": "Vähenda",
"pan": "Panoraamimine",
"reset": "Lähtesta suum"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "fa",
"options": {
"months": [
"فروردین",
"اردیبهشت",
"خرداد",
"تیر",
"مرداد",
"شهریور",
"مهر",
"آبان",
"آذر",
"دی",
"بهمن",
"اسفند"
],
"shortMonths": [
"فرو",
"ارد",
"خرد",
"تیر",
"مرد",
"شهر",
"مهر",
"آبا",
"آذر",
"دی",
"بهمـ",
"اسفـ"
],
"days": [
"یکشنبه",
"دوشنبه",
"سه شنبه",
"چهارشنبه",
"پنجشنبه",
"جمعه",
"شنبه"
],
"shortDays": ["ی", "د", "س", "چ", "پ", "ج", "ش"],
"toolbar": {
"exportToSVG": "دانلود SVG",
"exportToPNG": "دانلود PNG",
"exportToCSV": "دانلود CSV",
"menu": "منو",
"selection": "انتخاب",
"selectionZoom": "بزرگنمایی انتخابی",
"zoomIn": "بزرگنمایی",
"zoomOut": "کوچکنمایی",
"pan": "پیمایش",
"reset": "بازنشانی بزرگنمایی"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "fi",
"options": {
"months": [
"Tammikuu",
"Helmikuu",
"Maaliskuu",
"Huhtikuu",
"Toukokuu",
"Kesäkuu",
"Heinäkuu",
"Elokuu",
"Syyskuu",
"Lokakuu",
"Marraskuu",
"Joulukuu"
],
"shortMonths": [
"Tammi",
"Helmi",
"Maalis",
"Huhti",
"Touko",
"Kesä",
"Heinä",
"Elo",
"Syys",
"Loka",
"Marras",
"Joulu"
],
"days": [
"Sunnuntai",
"Maanantai",
"Tiistai",
"Keskiviikko",
"Torstai",
"Perjantai",
"Lauantai"
],
"shortDays": ["Su", "Ma", "Ti", "Ke", "To", "Pe", "La"],
"toolbar": {
"exportToSVG": "Lataa SVG",
"exportToPNG": "Lataa PNG",
"exportToCSV": "Lataa CSV",
"menu": "Valikko",
"selection": "Valinta",
"selectionZoom": "Valinnan zoomaus",
"zoomIn": "Lähennä",
"zoomOut": "Loitonna",
"pan": "Panoroi",
"reset": "Nollaa zoomaus"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "fr",
"options": {
"months": [
"janvier",
"février",
"mars",
"avril",
"mai",
"juin",
"juillet",
"août",
"septembre",
"octobre",
"novembre",
"décembre"
],
"shortMonths": [
"janv.",
"févr.",
"mars",
"avr.",
"mai",
"juin",
"juill.",
"août",
"sept.",
"oct.",
"nov.",
"déc."
],
"days": [
"dimanche",
"lundi",
"mardi",
"mercredi",
"jeudi",
"vendredi",
"samedi"
],
"shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
"toolbar": {
"exportToSVG": "Télécharger au format SVG",
"exportToPNG": "Télécharger au format PNG",
"exportToCSV": "Télécharger au format CSV",
"menu": "Menu",
"selection": "Sélection",
"selectionZoom": "Sélection et zoom",
"zoomIn": "Zoomer",
"zoomOut": "Dézoomer",
"pan": "Navigation",
"reset": "Réinitialiser le zoom"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "he",
"options": {
"months": [
"ינואר",
"פברואר",
"מרץ",
"אפריל",
"מאי",
"יוני",
"יולי",
"אוגוסט",
"ספטמבר",
"אוקטובר",
"נובמבר",
"דצמבר"
],
"shortMonths": [
"ינו׳",
"פבר׳",
"מרץ",
"אפר׳",
"מאי",
"יוני",
"יולי",
"אוג׳",
"ספט׳",
"אוק׳",
"נוב׳",
"דצמ׳"
],
"days": [
"ראשון",
"שני",
"שלישי",
"רביעי",
"חמישי",
"שישי",
"שבת"
],
"shortDays": ["א׳", "ב׳", "ג׳", "ד׳", "ה׳", "ו׳", "ש׳"],
"toolbar": {
"exportToSVG": "הורד SVG",
"exportToPNG": "הורד PNG",
"exportToCSV": "הורד CSV",
"menu": "תפריט",
"selection": "בחירה",
"selectionZoom": "זום בחירה",
"zoomIn": "הגדלה",
"zoomOut": "הקטנה",
"pan": "הזזה",
"reset": "איפוס תצוגה"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "hi",
"options": {
"months": [
"जनवरी",
"फ़रवरी",
"मार्च",
"अप्रैल",
"मई",
"जून",
"जुलाई",
"अगस्त",
"सितंबर",
"अक्टूबर",
"नवंबर",
"दिसंबर"
],
"shortMonths": [
"जनवरी",
"फ़रवरी",
"मार्च",
"अप्रैल",
"मई",
"जून",
"जुलाई",
"अगस्त",
"सितंबर",
"अक्टूबर",
"नवंबर",
"दिसंबर"
],
"days": [
"रविवार",
"सोमवार",
"मंगलवार",
"बुधवार",
"गुरुवार",
"शुक्रवार",
"शनिवार"
],
"shortDays": ["रवि", "सोम", "मंगल", "बुध", "गुरु", "शुक्र", "शनि"],
"toolbar": {
"exportToSVG": "निर्यात SVG",
"exportToPNG": "निर्यात PNG",
"exportToCSV": "निर्यात CSV",
"menu": "सूची",
"selection": "चयन",
"selectionZoom": "ज़ूम करना",
"zoomIn": "ज़ूम इन",
"zoomOut": "ज़ूम आउट",
"pan": "पैनिंग",
"reset": "फिर से कायम करना"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "hr",
"options": {
"months": [
"Siječanj",
"Veljača",
"Ožujak",
"Travanj",
"Svibanj",
"Lipanj",
"Srpanj",
"Kolovoz",
"Rujan",
"Listopad",
"Studeni",
"Prosinac"
],
"shortMonths": [
"Sij",
"Velj",
"Ožu",
"Tra",
"Svi",
"Lip",
"Srp",
"Kol",
"Ruj",
"Lis",
"Stu",
"Pro"
],
"days": [
"Nedjelja",
"Ponedjeljak",
"Utorak",
"Srijeda",
"Četvrtak",
"Petak",
"Subota"
],
"shortDays": ["Ned", "Pon", "Uto", "Sri", "Čet", "Pet", "Sub"],
"toolbar": {
"exportToSVG": "Preuzmi SVG",
"exportToPNG": "Preuzmi PNG",
"exportToCSV": "Preuzmi CSV",
"menu": "Izbornik",
"selection": "Odabir",
"selectionZoom": "Odabirno povećanje",
"zoomIn": "Uvećajte prikaz",
"zoomOut": "Umanjite prikaz",
"pan": "Pomicanje",
"reset": "Povratak na zadani prikaz"
}
}
}

View File

@@ -1,64 +0,0 @@
{
"name": "hu",
"options": {
"months": [
"január",
"február",
"március",
"április",
"május",
"június",
"július",
"augusztus",
"szeptember",
"október",
"november",
"december"
],
"shortMonths": [
"jan",
"feb",
"mar",
"ápr",
"máj",
"jún",
"júl",
"aug",
"szept",
"okt",
"nov",
"dec"
],
"days": [
"hétfő",
"kedd",
"szerda",
"csütörtök",
"péntek",
"szombat",
"vasárnap"
],
"shortDays": [
"H",
"K",
"Sze",
"Cs",
"P",
"Szo",
"V"
],
"toolbar": {
"exportToSVG": "Exportálás SVG-be",
"exportToPNG": "Exportálás PNG-be",
"exportToCSV": "Exportálás CSV-be",
"menu": "Fő ajánlat",
"download": "SVG letöltése",
"selection": "Kiválasztás",
"selectionZoom": "Nagyító kiválasztása",
"zoomIn": "Nagyítás",
"zoomOut": "Kicsinyítés",
"pan": "Képcsúsztatás",
"reset": "Nagyító visszaállítása"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "hy",
"options": {
"months": [
"Հունվար",
"Փետրվար",
"Մարտ",
"Ապրիլ",
"Մայիս",
"Հունիս",
"Հուլիս",
"Օգոստոս",
"Սեպտեմբեր",
"Հոկտեմբեր",
"Նոյեմբեր",
"Դեկտեմբեր"
],
"shortMonths": [
"Հնվ",
"Փտվ",
"Մրտ",
"Ապր",
"Մյս",
"Հնս",
"Հլիս",
"Օգս",
"Սեպ",
"Հոկ",
"Նոյ",
"Դեկ"
],
"days": [
"Կիրակի",
"Երկուշաբթի",
"Երեքշաբթի",
"Չորեքշաբթի",
"Հինգշաբթի",
"Ուրբաթ",
"Շաբաթ"
],
"shortDays": ["Կիր", "Երկ", "Երք", "Չրք", "Հնգ", "Ուրբ", "Շբթ"],
"toolbar": {
"exportToSVG": "Բեռնել SVG",
"exportToPNG": "Բեռնել PNG",
"exportToCSV": "Բեռնել CSV",
"menu": "Մենյու",
"selection": "Ընտրված",
"selectionZoom": "Ընտրված հատվածի խոշորացում",
"zoomIn": "Խոշորացնել",
"zoomOut": "Մանրացնել",
"pan": "Տեղափոխում",
"reset": "Բերել սկզբնական վիճակի"
}
}
}

View File

@@ -1,47 +0,0 @@
{
"name": "id",
"options": {
"months": [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
"shortMonths": [
"Jan",
"Feb",
"Mar",
"Apr",
"Mei",
"Jun",
"Jul",
"Agu",
"Sep",
"Okt",
"Nov",
"Des"
],
"days": ["Minggu", "Senin", "Selasa", "Rabu", "kamis", "Jumat", "Sabtu"],
"shortDays": ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
"toolbar": {
"exportToSVG": "Unduh SVG",
"exportToPNG": "Unduh PNG",
"exportToCSV": "Unduh CSV",
"menu": "Menu",
"selection": "Pilihan",
"selectionZoom": "Perbesar Pilihan",
"zoomIn": "Perbesar",
"zoomOut": "Perkecil",
"pan": "Geser",
"reset": "Atur Ulang Zoom"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "it",
"options": {
"months": [
"Gennaio",
"Febbraio",
"Marzo",
"Aprile",
"Maggio",
"Giugno",
"Luglio",
"Agosto",
"Settembre",
"Ottobre",
"Novembre",
"Dicembre"
],
"shortMonths": [
"Gen",
"Feb",
"Mar",
"Apr",
"Mag",
"Giu",
"Lug",
"Ago",
"Set",
"Ott",
"Nov",
"Dic"
],
"days": [
"Domenica",
"Lunedì",
"Martedì",
"Mercoledì",
"Giovedì",
"Venerdì",
"Sabato"
],
"shortDays": ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
"toolbar": {
"exportToSVG": "Scarica SVG",
"exportToPNG": "Scarica PNG",
"exportToCSV": "Scarica CSV",
"menu": "Menu",
"selection": "Selezione",
"selectionZoom": "Seleziona Zoom",
"zoomIn": "Zoom In",
"zoomOut": "Zoom Out",
"pan": "Sposta",
"reset": "Reimposta Zoom"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "ja",
"options": {
"months": [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
"shortMonths": [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
"days": [
"日曜日",
"月曜日",
"火曜日",
"水曜日",
"木曜日",
"金曜日",
"土曜日"
],
"shortDays": ["日", "月", "火", "水", "木", "金", "土"],
"toolbar": {
"exportToSVG": "SVGダウンロード",
"exportToPNG": "PNGダウンロード",
"exportToCSV": "CSVダウンロード",
"menu": "メニュー",
"selection": "選択",
"selectionZoom": "選択ズーム",
"zoomIn": "拡大",
"zoomOut": "縮小",
"pan": "パン",
"reset": "ズームリセット"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "ka",
"options": {
"months": [
"იანვარი",
"თებერვალი",
"მარტი",
"აპრილი",
"მაისი",
"ივნისი",
"ივლისი",
"აგვისტო",
"სექტემბერი",
"ოქტომბერი",
"ნოემბერი",
"დეკემბერი"
],
"shortMonths": [
"იან",
"თებ",
"მარ",
"აპრ",
"მაი",
"ივნ",
"ივლ",
"აგვ",
"სექ",
"ოქტ",
"ნოე",
"დეკ"
],
"days": [
"კვირა",
"ორშაბათი",
"სამშაბათი",
"ოთხშაბათი",
"ხუთშაბათი",
"პარასკევი",
"შაბათი"
],
"shortDays": ["კვი", "ორშ", "სამ", "ოთხ", "ხუთ", "პარ", "შაბ"],
"toolbar": {
"exportToSVG": "გადმოქაჩე SVG",
"exportToPNG": "გადმოქაჩე PNG",
"exportToCSV": "გადმოქაჩე CSV",
"menu": "მენიუ",
"selection": "არჩევა",
"selectionZoom": "არჩეულის გადიდება",
"zoomIn": "გადიდება",
"zoomOut": "დაპატარაება",
"pan": "გადაჩოჩება",
"reset": "გადიდების გაუქმება"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "ko",
"options": {
"months": [
"1월",
"2월",
"3월",
"4월",
"5월",
"6월",
"7월",
"8월",
"9월",
"10월",
"11월",
"12월"
],
"shortMonths": [
"1월",
"2월",
"3월",
"4월",
"5월",
"6월",
"7월",
"8월",
"9월",
"10월",
"11월",
"12월"
],
"days": [
"일요일",
"월요일",
"화요일",
"수요일",
"목요일",
"금요일",
"토요일"
],
"shortDays": ["일", "월", "화", "수", "목", "금", "토"],
"toolbar": {
"exportToSVG": "SVG 다운로드",
"exportToPNG": "PNG 다운로드",
"exportToCSV": "CSV 다운로드",
"menu": "메뉴",
"selection": "선택",
"selectionZoom": "선택영역 확대",
"zoomIn": "확대",
"zoomOut": "축소",
"pan": "패닝",
"reset": "원래대로"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "lt",
"options": {
"months": [
"Sausis",
"Vasaris",
"Kovas",
"Balandis",
"Gegužė",
"Birželis",
"Liepa",
"Rugpjūtis",
"Rugsėjis",
"Spalis",
"Lapkritis",
"Gruodis"
],
"shortMonths": [
"Sau",
"Vas",
"Kov",
"Bal",
"Geg",
"Bir",
"Lie",
"Rgp",
"Rgs",
"Spl",
"Lap",
"Grd"
],
"days": [
"Sekmadienis",
"Pirmadienis",
"Antradienis",
"Trečiadienis",
"Ketvirtadienis",
"Penktadienis",
"Šeštadienis"
],
"shortDays": ["Sk", "Per", "An", "Tr", "Kt", "Pn", "Št"],
"toolbar": {
"exportToSVG": "Atsisiųsti SVG",
"exportToPNG": "Atsisiųsti PNG",
"exportToCSV": "Atsisiųsti CSV",
"menu": "Menu",
"selection": "Pasirinkimas",
"selectionZoom": "Zoom: Pasirinkimas",
"zoomIn": "Zoom: Priartinti",
"zoomOut": "Zoom: Atitolinti",
"pan": "Perkėlimas",
"reset": "Atstatyti"
}
}
}

View File

@@ -1,64 +0,0 @@
{
"name": "lv",
"options": {
"months": [
"janvāris",
"februāris",
"marts",
"aprīlis",
"maijs",
"jūnijs",
"jūlijs",
"augusts",
"septembris",
"oktobris",
"novembris",
"decembris"
],
"shortMonths": [
"janv",
"febr",
"marts",
"apr",
"maijs",
"jūn",
"jūl",
"aug",
"sept",
"okt",
"nov",
"dec"
],
"days": [
"svētdiena",
"pirmdiena",
"otrdiena",
"trešdiena",
"ceturtdiena",
"piektdiena",
"sestdiena"
],
"shortDays": [
"Sv",
"P",
"O",
"T",
"C",
"P",
"S"
],
"toolbar": {
"exportToSVG": "Lejuplādēt SVG",
"exportToPNG": "Lejuplādēt PNG",
"exportToCSV": "Lejuplādēt CSV",
"menu": "Izvēlne",
"selection": "Atlase",
"selectionZoom": "Pietuvināt atlasi",
"zoomIn": "Pietuvināt",
"zoomOut": "Attālināt",
"pan": "Pārvietoties diagrammā",
"reset": "Atiestatīt pietuvinājumu"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "nb",
"options": {
"months": [
"Januar",
"Februar",
"Mars",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Desember"
],
"shortMonths": [
"Jan",
"Feb",
"Mar",
"Apr",
"Mai",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Des"
],
"days": [
"Søndag",
"Mandag",
"Tirsdag",
"Onsdag",
"Torsdag",
"Fredag",
"Lørdag"
],
"shortDays": ["Sø", "Ma", "Ti", "On", "To", "Fr", "Lø"],
"toolbar": {
"exportToSVG": "Last ned SVG",
"exportToPNG": "Last ned PNG",
"exportToCSV": "Last ned CSV",
"menu": "Menu",
"selection": "Velg",
"selectionZoom": "Zoom: Velg",
"zoomIn": "Zoome inn",
"zoomOut": "Zoome ut",
"pan": "Skyving",
"reset": "Start på nytt"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "nl",
"options": {
"months": [
"Januari",
"Februari",
"Maart",
"April",
"Mei",
"Juni",
"Juli",
"Augustus",
"September",
"Oktober",
"November",
"December"
],
"shortMonths": [
"Jan",
"Feb",
"Mrt",
"Apr",
"Mei",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dec"
],
"days": [
"Zondag",
"Maandag",
"Dinsdag",
"Woensdag",
"Donderdag",
"Vrijdag",
"Zaterdag"
],
"shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
"toolbar": {
"exportToSVG": "Download SVG",
"exportToPNG": "Download PNG",
"exportToCSV": "Download CSV",
"menu": "Menu",
"selection": "Selectie",
"selectionZoom": "Zoom selectie",
"zoomIn": "Zoom in",
"zoomOut": "Zoom out",
"pan": "Verplaatsen",
"reset": "Standaardwaarden"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "pl",
"options": {
"months": [
"Styczeń",
"Luty",
"Marzec",
"Kwiecień",
"Maj",
"Czerwiec",
"Lipiec",
"Sierpień",
"Wrzesień",
"Październik",
"Listopad",
"Grudzień"
],
"shortMonths": [
"Sty",
"Lut",
"Mar",
"Kwi",
"Maj",
"Cze",
"Lip",
"Sie",
"Wrz",
"Paź",
"Lis",
"Gru"
],
"days": [
"Niedziela",
"Poniedziałek",
"Wtorek",
"Środa",
"Czwartek",
"Piątek",
"Sobota"
],
"shortDays": ["Nd", "Pn", "Wt", "Śr", "Cz", "Pt", "Sb"],
"toolbar": {
"exportToSVG": "Pobierz SVG",
"exportToPNG": "Pobierz PNG",
"exportToCSV": "Pobierz CSV",
"menu": "Menu",
"selection": "Wybieranie",
"selectionZoom": "Zoom: Wybieranie",
"zoomIn": "Zoom: Przybliż",
"zoomOut": "Zoom: Oddal",
"pan": "Przesuwanie",
"reset": "Resetuj"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "pt-br",
"options": {
"months": [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
],
"shortMonths": [
"Jan",
"Fev",
"Mar",
"Abr",
"Mai",
"Jun",
"Jul",
"Ago",
"Set",
"Out",
"Nov",
"Dez"
],
"days": [
"Domingo",
"Segunda",
"Terça",
"Quarta",
"Quinta",
"Sexta",
"Sábado"
],
"shortDays": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
"toolbar": {
"exportToSVG": "Baixar SVG",
"exportToPNG": "Baixar PNG",
"exportToCSV": "Baixar CSV",
"menu": "Menu",
"selection": "Selecionar",
"selectionZoom": "Selecionar Zoom",
"zoomIn": "Aumentar",
"zoomOut": "Diminuir",
"pan": "Navegação",
"reset": "Reiniciar Zoom"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "pt",
"options": {
"months": [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
],
"shortMonths": [
"Jan",
"Fev",
"Mar",
"Abr",
"Mai",
"Jun",
"Jul",
"Ag",
"Set",
"Out",
"Nov",
"Dez"
],
"days": [
"Domingo",
"Segunda-feira",
"Terça-feira",
"Quarta-feira",
"Quinta-feira",
"Sexta-feira",
"Sábado"
],
"shortDays": ["Do", "Se", "Te", "Qa", "Qi", "Sx", "Sa"],
"toolbar": {
"exportToSVG": "Baixar SVG",
"exportToPNG": "Baixar PNG",
"exportToCSV": "Baixar CSV",
"menu": "Menu",
"selection": "Selecionar",
"selectionZoom": "Zoom: Selecionar",
"zoomIn": "Zoom: Aumentar",
"zoomOut": "Zoom: Diminuir",
"pan": "Deslocamento",
"reset": "Redefinir"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "rs",
"options": {
"months": [
"Januar",
"Februar",
"Mart",
"April",
"Maj",
"Jun",
"Jul",
"Avgust",
"Septembar",
"Oktobar",
"Novembar",
"Decembar"
],
"shortMonths": [
"Jan",
"Feb",
"Mar",
"Apr",
"Maj",
"Jun",
"Jul",
"Avg",
"Sep",
"Okt",
"Nov",
"Dec"
],
"days": [
"Nedelja",
"Ponedeljak",
"Utorak",
"Sreda",
"Četvrtak",
"Petak",
"Subota"
],
"shortDays": ["Ned", "Pon", "Uto", "Sre", "Čet", "Pet", "Sub"],
"toolbar": {
"exportToSVG": "Preuzmi SVG",
"exportToPNG": "Preuzmi PNG",
"exportToCSV": "Preuzmi CSV",
"menu": "Meni",
"selection": "Odabir",
"selectionZoom": "Odabirno povećanje",
"zoomIn": "Uvećajte prikaz",
"zoomOut": "Umanjite prikaz",
"pan": "Pomeranje",
"reset": "Resetuj prikaz"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "ru",
"options": {
"months": [
"Январь",
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь"
],
"shortMonths": [
"Янв",
"Фев",
"Мар",
"Апр",
"Май",
"Июн",
"Июл",
"Авг",
"Сен",
"Окт",
"Ноя",
"Дек"
],
"days": [
"Воскресенье",
"Понедельник",
"Вторник",
"Среда",
"Четверг",
"Пятница",
"Суббота"
],
"shortDays": ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
"toolbar": {
"exportToSVG": "Сохранить SVG",
"exportToPNG": "Сохранить PNG",
"exportToCSV": "Сохранить CSV",
"menu": "Меню",
"selection": "Выбор",
"selectionZoom": "Выбор с увеличением",
"zoomIn": "Увеличить",
"zoomOut": "Уменьшить",
"pan": "Перемещение",
"reset": "Сбросить увеличение"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "se",
"options": {
"months": [
"Januari",
"Februari",
"Mars",
"April",
"Maj",
"Juni",
"Juli",
"Augusti",
"September",
"Oktober",
"November",
"December"
],
"shortMonths": [
"Jan",
"Feb",
"Mar",
"Apr",
"Maj",
"Juni",
"Juli",
"Aug",
"Sep",
"Okt",
"Nov",
"Dec"
],
"days": [
"Söndag",
"Måndag",
"Tisdag",
"Onsdag",
"Torsdag",
"Fredag",
"Lördag"
],
"shortDays": ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
"toolbar": {
"exportToSVG": "Ladda SVG",
"exportToPNG": "Ladda PNG",
"exportToCSV": "Ladda CSV",
"menu": "Meny",
"selection": "Selektion",
"selectionZoom": "Val av zoom",
"zoomIn": "Zooma in",
"zoomOut": "Zooma ut",
"pan": "Panorering",
"reset": "Återställ zoomning"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "sk",
"options": {
"months": [
"Január",
"Február",
"Marec",
"Apríl",
"Máj",
"Jún",
"Júl",
"August",
"September",
"Október",
"November",
"December"
],
"shortMonths": [
"Jan",
"Feb",
"Mar",
"Apr",
"Máj",
"Jún",
"Júl",
"Aug",
"Sep",
"Okt",
"Nov",
"Dec"
],
"days": [
"Nedeľa",
"Pondelok",
"Utorok",
"Streda",
"Štvrtok",
"Piatok",
"Sobota"
],
"shortDays": ["Ne", "Po", "Ut", "St", "Št", "Pi", "So"],
"toolbar": {
"exportToSVG": "Stiahnuť SVG",
"exportToPNG": "Stiahnuť PNG",
"exportToCSV": "Stiahnuť CSV",
"menu": "Menu",
"selection": "Vyberanie",
"selectionZoom": "Zoom: Vyberanie",
"zoomIn": "Zoom: Priblížiť",
"zoomOut": "Zoom: Vzdialiť",
"pan": "Presúvanie",
"reset": "Resetovať"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "sl",
"options": {
"months": [
"Januar",
"Februar",
"Marec",
"April",
"Maj",
"Junij",
"Julij",
"Avgust",
"Septemer",
"Oktober",
"November",
"December"
],
"shortMonths": [
"Jan",
"Feb",
"Mar",
"Apr",
"Maj",
"Jun",
"Jul",
"Avg",
"Sep",
"Okt",
"Nov",
"Dec"
],
"days": [
"Nedelja",
"Ponedeljek",
"Torek",
"Sreda",
"Četrtek",
"Petek",
"Sobota"
],
"shortDays": ["Ne", "Po", "To", "Sr", "Če", "Pe", "So"],
"toolbar": {
"exportToSVG": "Prenesi SVG",
"exportToPNG": "Prenesi PNG",
"exportToCSV": "Prenesi CSV",
"menu": "Menu",
"selection": "Izbiranje",
"selectionZoom": "Zoom: Izbira",
"zoomIn": "Zoom: Približaj",
"zoomOut": "Zoom: Oddalji",
"pan": "Pomikanje",
"reset": "Resetiraj"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "sq",
"options": {
"months": [
"Janar",
"Shkurt",
"Mars",
"Prill",
"Maj",
"Qershor",
"Korrik",
"Gusht",
"Shtator",
"Tetor",
"Nëntor",
"Dhjetor"
],
"shortMonths": [
"Jan",
"Shk",
"Mar",
"Pr",
"Maj",
"Qer",
"Korr",
"Gush",
"Sht",
"Tet",
"Nën",
"Dhj"
],
"days": [
"e Dielë",
"e Hënë",
"e Martë",
"e Mërkurë",
"e Enjte",
"e Premte",
"e Shtunë"
],
"shortDays": ["Die", "Hën", "Mar", "Mër", "Enj", "Pre", "Sht"],
"toolbar": {
"exportToSVG": "Shkarko SVG",
"exportToPNG": "Shkarko PNG",
"exportToCSV": "Shkarko CSV",
"menu": "Menu",
"selection": "Seleksiono",
"selectionZoom": "Seleksiono Zmadhim",
"zoomIn": "Zmadho",
"zoomOut": "Zvogëlo",
"pan": "Spostoje",
"reset": "Rikthe dimensionin"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "th",
"options": {
"months": [
"มกราคม",
"กุมภาพันธ์",
"มีนาคม",
"เมษายน",
"พฤษภาคม",
"มิถุนายน",
"กรกฎาคม",
"สิงหาคม",
"กันยายน",
"ตุลาคม",
"พฤศจิกายน",
"ธันวาคม"
],
"shortMonths": [
"ม.ค.",
"ก.พ.",
"มี.ค.",
"เม.ย.",
"พ.ค.",
"มิ.ย.",
"ก.ค.",
"ส.ค.",
"ก.ย.",
"ต.ค.",
"พ.ย.",
"ธ.ค."
],
"days": [
"อาทิตย์",
"จันทร์",
"อังคาร",
"พุธ",
"พฤหัสบดี",
"ศุกร์",
"เสาร์"
],
"shortDays": ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"],
"toolbar": {
"exportToSVG": "ดาวน์โหลด SVG",
"exportToPNG": "ดาวน์โหลด PNG",
"exportToCSV": "ดาวน์โหลด CSV",
"menu": "เมนู",
"selection": "เลือก",
"selectionZoom": "เลือกจุดที่จะซูม",
"zoomIn": "ซูมเข้า",
"zoomOut": "ซูมออก",
"pan": "ปรากฎว่า",
"reset": "รีเซ็ตการซูม"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "tr",
"options": {
"months": [
"Ocak",
"Şubat",
"Mart",
"Nisan",
"Mayıs",
"Haziran",
"Temmuz",
"Ağustos",
"Eylül",
"Ekim",
"Kasım",
"Aralık"
],
"shortMonths": [
"Oca",
"Şub",
"Mar",
"Nis",
"May",
"Haz",
"Tem",
"Ağu",
"Eyl",
"Eki",
"Kas",
"Ara"
],
"days": [
"Pazar",
"Pazartesi",
"Salı",
"Çarşamba",
"Perşembe",
"Cuma",
"Cumartesi"
],
"shortDays": ["Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cmt"],
"toolbar": {
"exportToSVG": "SVG İndir",
"exportToPNG": "PNG İndir",
"exportToCSV": "CSV İndir",
"menu": "Menü",
"selection": "Seçim",
"selectionZoom": "Seçim Yakınlaştır",
"zoomIn": "Yakınlaştır",
"zoomOut": "Uzaklaştır",
"pan": "Kaydır",
"reset": "Yakınlaştırmayı Sıfırla"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "ua",
"options": {
"months": [
"Січень",
"Лютий",
"Березень",
"Квітень",
"Травень",
"Червень",
"Липень",
"Серпень",
"Вересень",
"Жовтень",
"Листопад",
"Грудень"
],
"shortMonths": [
"Січ",
"Лют",
"Бер",
"Кві",
"Тра",
"Чер",
"Лип",
"Сер",
"Вер",
"Жов",
"Лис",
"Гру"
],
"days": [
"Неділя",
"Понеділок",
"Вівторок",
"Середа",
"Четвер",
"П'ятниця",
"Субота"
],
"shortDays": ["Нд", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
"toolbar": {
"exportToSVG": "Зберегти SVG",
"exportToPNG": "Зберегти PNG",
"exportToCSV": "Зберегти CSV",
"menu": "Меню",
"selection": "Вибір",
"selectionZoom": "Вибір із збільшенням",
"zoomIn": "Збільшити",
"zoomOut": "Зменшити",
"pan": "Переміщення",
"reset": "Скинути збільшення"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "zh-cn",
"options": {
"months": [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
"shortMonths": [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
"days": [
"星期天",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
],
"shortDays": ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
"toolbar": {
"exportToSVG": "下载 SVG",
"exportToPNG": "下载 PNG",
"exportToCSV": "下载 CSV",
"menu": "菜单",
"selection": "选择",
"selectionZoom": "选择缩放",
"zoomIn": "放大",
"zoomOut": "缩小",
"pan": "平移",
"reset": "重置缩放"
}
}
}

View File

@@ -1,55 +0,0 @@
{
"name": "zh-tw",
"options": {
"months": [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
"shortMonths": [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
"days": [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
],
"shortDays": ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
"toolbar": {
"exportToSVG": "下載 SVG",
"exportToPNG": "下載 PNG",
"exportToCSV": "下載 CSV",
"menu": "菜單",
"selection": "選擇",
"selectionZoom": "選擇縮放",
"zoomIn": "放大",
"zoomOut": "縮小",
"pan": "平移",
"reset": "重置縮放"
}
}
}

View File

@@ -1,261 +0,0 @@
import Utils from '../utils/Utils'
/**
* ApexCharts Animation Class.
*
* @module Animations
**/
export default class Animations {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.setEasingFunctions()
}
setEasingFunctions() {
let easing
if (this.w.globals.easing) return
const userDefinedEasing = this.w.config.chart.animations.easing
switch (userDefinedEasing) {
case 'linear': {
easing = '-'
break
}
case 'easein': {
easing = '<'
break
}
case 'easeout': {
easing = '>'
break
}
case 'easeinout': {
easing = '<>'
break
}
case 'swing': {
easing = (pos) => {
let s = 1.70158
let ret = (pos -= 1) * pos * ((s + 1) * pos + s) + 1
return ret
}
break
}
case 'bounce': {
easing = (pos) => {
let ret = ''
if (pos < 1 / 2.75) {
ret = 7.5625 * pos * pos
} else if (pos < 2 / 2.75) {
ret = 7.5625 * (pos -= 1.5 / 2.75) * pos + 0.75
} else if (pos < 2.5 / 2.75) {
ret = 7.5625 * (pos -= 2.25 / 2.75) * pos + 0.9375
} else {
ret = 7.5625 * (pos -= 2.625 / 2.75) * pos + 0.984375
}
return ret
}
break
}
case 'elastic': {
easing = (pos) => {
if (pos === !!pos) return pos
return (
Math.pow(2, -10 * pos) *
Math.sin(((pos - 0.075) * (2 * Math.PI)) / 0.3) +
1
)
}
break
}
default: {
easing = '<>'
}
}
this.w.globals.easing = easing
}
animateLine(el, from, to, speed) {
el.attr(from)
.animate(speed)
.attr(to)
}
/*
** Animate radius of a circle element
*/
animateMarker(el, from, to, speed, easing, cb) {
if (!from) from = 0
el.attr({
r: from,
width: from,
height: from
})
.animate(speed, easing)
.attr({
r: to,
width: to.width,
height: to.height
})
.afterAll(() => {
cb()
})
}
/*
** Animate radius and position of a circle element
*/
animateCircle(el, from, to, speed, easing) {
el.attr({
r: from.r,
cx: from.cx,
cy: from.cy
})
.animate(speed, easing)
.attr({
r: to.r,
cx: to.cx,
cy: to.cy
})
}
/*
** Animate rect properties
*/
animateRect(el, from, to, speed, fn) {
el.attr(from)
.animate(speed)
.attr(to)
.afterAll(() => fn())
}
animatePathsGradually(params) {
let { el, realIndex, j, fill, pathFrom, pathTo, speed, delay } = params
let me = this
let w = this.w
let delayFactor = 0
if (w.config.chart.animations.animateGradually.enabled) {
delayFactor = w.config.chart.animations.animateGradually.delay
}
if (
w.config.chart.animations.dynamicAnimation.enabled &&
w.globals.dataChanged &&
w.config.chart.type !== 'bar'
) {
// disabled due to this bug - https://github.com/apexcharts/vue-apexcharts/issues/75
delayFactor = 0
}
me.morphSVG(
el,
realIndex,
j,
w.config.chart.type === 'line' && !w.globals.comboCharts
? 'stroke'
: fill,
pathFrom,
pathTo,
speed,
delay * delayFactor
)
}
showDelayedElements() {
this.w.globals.delayedElements.forEach((d) => {
const ele = d.el
ele.classList.remove('apexcharts-element-hidden')
})
}
animationCompleted(el) {
const w = this.w
if (w.globals.animationEnded) return
w.globals.animationEnded = true
this.showDelayedElements()
if (typeof w.config.chart.events.animationEnd === 'function') {
w.config.chart.events.animationEnd(this.ctx, { el, w })
}
}
// SVG.js animation for morphing one path to another
morphSVG(el, realIndex, j, fill, pathFrom, pathTo, speed, delay) {
let w = this.w
if (!pathFrom) {
pathFrom = el.attr('pathFrom')
}
if (!pathTo) {
pathTo = el.attr('pathTo')
}
const disableAnimationForCorrupPath = (path) => {
if (w.config.chart.type === 'radar') {
// radar chart drops the path to bottom and hence a corrup path looks ugly
// therefore, disable animation for such a case
speed = 1
}
return `M 0 ${w.globals.gridHeight}`
}
if (
!pathFrom ||
pathFrom.indexOf('undefined') > -1 ||
pathFrom.indexOf('NaN') > -1
) {
pathFrom = disableAnimationForCorrupPath()
}
if (
!pathTo ||
pathTo.indexOf('undefined') > -1 ||
pathTo.indexOf('NaN') > -1
) {
pathTo = disableAnimationForCorrupPath()
}
if (!w.globals.shouldAnimate) {
speed = 1
}
el.plot(pathFrom)
.animate(1, w.globals.easing, delay)
.plot(pathFrom)
.animate(speed, w.globals.easing, delay)
.plot(pathTo)
.afterAll(() => {
// a flag to indicate that the original mount function can return true now as animation finished here
if (Utils.isNumber(j)) {
if (
j === w.globals.series[w.globals.maxValsInArrayIndex].length - 2 &&
w.globals.shouldAnimate
) {
this.animationCompleted(el)
}
} else if (fill !== 'none' && w.globals.shouldAnimate) {
if (
(!w.globals.comboCharts &&
realIndex === w.globals.series.length - 1) ||
w.globals.comboCharts
) {
this.animationCompleted(el)
}
}
this.showDelayedElements()
})
}
}

View File

@@ -1,25 +0,0 @@
import Config from './settings/Config'
import Globals from './settings/Globals'
/**
* ApexCharts Base Class for extending user options with pre-defined ApexCharts config.
*
* @module Base
**/
export default class Base {
constructor(opts) {
this.opts = opts
}
init() {
const config = new Config(this.opts).init({ responsiveOverride: false })
const globals = new Globals().init(config)
const w = {
config,
globals
}
return w
}
}

View File

@@ -1,614 +0,0 @@
import Bar from '../charts/Bar'
import BarStacked from '../charts/BarStacked'
import BoxCandleStick from '../charts/BoxCandleStick'
import CoreUtils from './CoreUtils'
import Crosshairs from './Crosshairs'
import HeatMap from '../charts/HeatMap'
import Globals from '../modules/settings/Globals'
import Pie from '../charts/Pie'
import Radar from '../charts/Radar'
import Radial from '../charts/Radial'
import RangeBar from '../charts/RangeBar'
import Legend from './legend/Legend'
import Line from '../charts/Line'
import Treemap from '../charts/Treemap'
import Graphics from './Graphics'
import Range from './Range'
import Utils from '../utils/Utils'
import Scales from './Scales'
import TimeScale from './TimeScale'
/**
* ApexCharts Core Class responsible for major calculations and creating elements.
*
* @module Core
**/
export default class Core {
constructor(el, ctx) {
this.ctx = ctx
this.w = ctx.w
this.el = el
}
// get data and store into appropriate vars
setupElements() {
let gl = this.w.globals
let cnf = this.w.config
// const graphics = new Graphics(this.ctx)
let ct = cnf.chart.type
let axisChartsArrTypes = [
'line',
'area',
'bar',
'rangeBar',
'candlestick',
'boxPlot',
'scatter',
'bubble',
'radar',
'heatmap',
'treemap'
]
let xyChartsArrTypes = [
'line',
'area',
'bar',
'rangeBar',
'candlestick',
'boxPlot',
'scatter',
'bubble'
]
gl.axisCharts = axisChartsArrTypes.indexOf(ct) > -1
gl.xyCharts = xyChartsArrTypes.indexOf(ct) > -1
gl.isBarHorizontal =
(cnf.chart.type === 'bar' ||
cnf.chart.type === 'rangeBar' ||
cnf.chart.type === 'boxPlot') &&
cnf.plotOptions.bar.horizontal
gl.chartClass = '.apexcharts' + gl.chartID
gl.dom.baseEl = this.el
gl.dom.elWrap = document.createElement('div')
Graphics.setAttrs(gl.dom.elWrap, {
id: gl.chartClass.substring(1),
class: 'apexcharts-canvas ' + gl.chartClass.substring(1)
})
this.el.appendChild(gl.dom.elWrap)
gl.dom.Paper = new window.SVG.Doc(gl.dom.elWrap)
gl.dom.Paper.attr({
class: 'apexcharts-svg',
'xmlns:data': 'ApexChartsNS',
transform: `translate(${cnf.chart.offsetX}, ${cnf.chart.offsetY})`
})
gl.dom.Paper.node.style.background = cnf.chart.background
this.setSVGDimensions()
gl.dom.elGraphical = gl.dom.Paper.group().attr({
class: 'apexcharts-inner apexcharts-graphical'
})
gl.dom.elAnnotations = gl.dom.Paper.group().attr({
class: 'apexcharts-annotations'
})
gl.dom.elDefs = gl.dom.Paper.defs()
gl.dom.elLegendWrap = document.createElement('div')
gl.dom.elLegendWrap.classList.add('apexcharts-legend')
gl.dom.elWrap.appendChild(gl.dom.elLegendWrap)
gl.dom.Paper.add(gl.dom.elGraphical)
gl.dom.elGraphical.add(gl.dom.elDefs)
}
plotChartType(ser, xyRatios) {
const w = this.w
const cnf = w.config
const gl = w.globals
let lineSeries = {
series: [],
i: []
}
let areaSeries = {
series: [],
i: []
}
let scatterSeries = {
series: [],
i: []
}
let bubbleSeries = {
series: [],
i: []
}
let columnSeries = {
series: [],
i: []
}
let candlestickSeries = {
series: [],
i: []
}
let boxplotSeries = {
series: [],
i: []
}
gl.series.map((series, st) => {
let comboCount = 0
// if user has specified a particular type for particular series
if (typeof ser[st].type !== 'undefined') {
if (ser[st].type === 'column' || ser[st].type === 'bar') {
if (gl.series.length > 1 && cnf.plotOptions.bar.horizontal) {
// horizontal bars not supported in mixed charts, hence show a warning
console.warn(
'Horizontal bars are not supported in a mixed/combo chart. Please turn off `plotOptions.bar.horizontal`'
)
}
columnSeries.series.push(series)
columnSeries.i.push(st)
comboCount++
w.globals.columnSeries = columnSeries.series
} else if (ser[st].type === 'area') {
areaSeries.series.push(series)
areaSeries.i.push(st)
comboCount++
} else if (ser[st].type === 'line') {
lineSeries.series.push(series)
lineSeries.i.push(st)
comboCount++
} else if (ser[st].type === 'scatter') {
scatterSeries.series.push(series)
scatterSeries.i.push(st)
} else if (ser[st].type === 'bubble') {
bubbleSeries.series.push(series)
bubbleSeries.i.push(st)
comboCount++
} else if (ser[st].type === 'candlestick') {
candlestickSeries.series.push(series)
candlestickSeries.i.push(st)
comboCount++
} else if (ser[st].type === 'boxPlot') {
boxplotSeries.series.push(series)
boxplotSeries.i.push(st)
comboCount++
} else {
// user has specified type, but it is not valid (other than line/area/column)
console.warn(
'You have specified an unrecognized chart type. Available types for this property are line/area/column/bar/scatter/bubble'
)
}
if (comboCount > 1) {
gl.comboCharts = true
}
} else {
lineSeries.series.push(series)
lineSeries.i.push(st)
}
})
let line = new Line(this.ctx, xyRatios)
let boxCandlestick = new BoxCandleStick(this.ctx, xyRatios)
this.ctx.pie = new Pie(this.ctx)
let radialBar = new Radial(this.ctx)
this.ctx.rangeBar = new RangeBar(this.ctx, xyRatios)
let radar = new Radar(this.ctx)
let elGraph = []
if (gl.comboCharts) {
if (areaSeries.series.length > 0) {
elGraph.push(line.draw(areaSeries.series, 'area', areaSeries.i))
}
if (columnSeries.series.length > 0) {
if (w.config.chart.stacked) {
let barStacked = new BarStacked(this.ctx, xyRatios)
elGraph.push(barStacked.draw(columnSeries.series, columnSeries.i))
} else {
this.ctx.bar = new Bar(this.ctx, xyRatios)
elGraph.push(this.ctx.bar.draw(columnSeries.series, columnSeries.i))
}
}
if (lineSeries.series.length > 0) {
elGraph.push(line.draw(lineSeries.series, 'line', lineSeries.i))
}
if (candlestickSeries.series.length > 0) {
elGraph.push(
boxCandlestick.draw(candlestickSeries.series, candlestickSeries.i)
)
}
if (boxplotSeries.series.length > 0) {
elGraph.push(boxCandlestick.draw(boxplotSeries.series, boxplotSeries.i))
}
if (scatterSeries.series.length > 0) {
const scatterLine = new Line(this.ctx, xyRatios, true)
elGraph.push(
scatterLine.draw(scatterSeries.series, 'scatter', scatterSeries.i)
)
}
if (bubbleSeries.series.length > 0) {
const bubbleLine = new Line(this.ctx, xyRatios, true)
elGraph.push(
bubbleLine.draw(bubbleSeries.series, 'bubble', bubbleSeries.i)
)
}
} else {
switch (cnf.chart.type) {
case 'line':
elGraph = line.draw(gl.series, 'line')
break
case 'area':
elGraph = line.draw(gl.series, 'area')
break
case 'bar':
if (cnf.chart.stacked) {
let barStacked = new BarStacked(this.ctx, xyRatios)
elGraph = barStacked.draw(gl.series)
} else {
this.ctx.bar = new Bar(this.ctx, xyRatios)
elGraph = this.ctx.bar.draw(gl.series)
}
break
case 'candlestick':
let candleStick = new BoxCandleStick(this.ctx, xyRatios)
elGraph = candleStick.draw(gl.series)
break
case 'boxPlot':
let boxPlot = new BoxCandleStick(this.ctx, xyRatios)
elGraph = boxPlot.draw(gl.series)
break
case 'rangeBar':
elGraph = this.ctx.rangeBar.draw(gl.series)
break
case 'heatmap':
let heatmap = new HeatMap(this.ctx, xyRatios)
elGraph = heatmap.draw(gl.series)
break
case 'treemap':
let treemap = new Treemap(this.ctx, xyRatios)
elGraph = treemap.draw(gl.series)
break
case 'pie':
case 'donut':
case 'polarArea':
elGraph = this.ctx.pie.draw(gl.series)
break
case 'radialBar':
elGraph = radialBar.draw(gl.series)
break
case 'radar':
elGraph = radar.draw(gl.series)
break
default:
elGraph = line.draw(gl.series)
}
}
return elGraph
}
setSVGDimensions() {
let gl = this.w.globals
let cnf = this.w.config
gl.svgWidth = cnf.chart.width
gl.svgHeight = cnf.chart.height
let elDim = Utils.getDimensions(this.el)
let widthUnit = cnf.chart.width
.toString()
.split(/[0-9]+/g)
.pop()
if (widthUnit === '%') {
if (Utils.isNumber(elDim[0])) {
if (elDim[0].width === 0) {
elDim = Utils.getDimensions(this.el.parentNode)
}
gl.svgWidth = (elDim[0] * parseInt(cnf.chart.width, 10)) / 100
}
} else if (widthUnit === 'px' || widthUnit === '') {
gl.svgWidth = parseInt(cnf.chart.width, 10)
}
let heightUnit = cnf.chart.height
.toString()
.split(/[0-9]+/g)
.pop()
if (gl.svgHeight !== 'auto' && gl.svgHeight !== '') {
if (heightUnit === '%') {
let elParentDim = Utils.getDimensions(this.el.parentNode)
gl.svgHeight = (elParentDim[1] * parseInt(cnf.chart.height, 10)) / 100
} else {
gl.svgHeight = parseInt(cnf.chart.height, 10)
}
} else {
if (gl.axisCharts) {
gl.svgHeight = gl.svgWidth / 1.61
} else {
gl.svgHeight = gl.svgWidth / 1.2
}
}
if (gl.svgWidth < 0) gl.svgWidth = 0
if (gl.svgHeight < 0) gl.svgHeight = 0
Graphics.setAttrs(gl.dom.Paper.node, {
width: gl.svgWidth,
height: gl.svgHeight
})
if (heightUnit !== '%') {
// fixes https://github.com/apexcharts/apexcharts.js/issues/2059
let offsetY = cnf.chart.sparkline.enabled
? 0
: gl.axisCharts
? cnf.chart.parentHeightOffset
: 0
gl.dom.Paper.node.parentNode.parentNode.style.minHeight =
gl.svgHeight + offsetY + 'px'
}
gl.dom.elWrap.style.width = gl.svgWidth + 'px'
gl.dom.elWrap.style.height = gl.svgHeight + 'px'
}
shiftGraphPosition() {
let gl = this.w.globals
let tY = gl.translateY
let tX = gl.translateX
let scalingAttrs = {
transform: 'translate(' + tX + ', ' + tY + ')'
}
Graphics.setAttrs(gl.dom.elGraphical.node, scalingAttrs)
}
// To prevent extra spacings in the bottom of the chart, we need to recalculate the height for pie/donut/radialbar charts
resizeNonAxisCharts() {
const w = this.w
const gl = w.globals
let legendHeight = 0
let offY = w.config.chart.sparkline.enabled ? 1 : 15
offY = offY + w.config.grid.padding.bottom
if (
(w.config.legend.position === 'top' ||
w.config.legend.position === 'bottom') &&
w.config.legend.show &&
!w.config.legend.floating
) {
legendHeight =
new Legend(this.ctx).legendHelpers.getLegendBBox().clwh + 10
}
let el = w.globals.dom.baseEl.querySelector(
'.apexcharts-radialbar, .apexcharts-pie'
)
let chartInnerDimensions = w.globals.radialSize * 2.05
if (
el &&
!w.config.chart.sparkline.enabled &&
w.config.plotOptions.radialBar.startAngle !== 0
) {
let elRadialRect = Utils.getBoundingClientRect(el)
chartInnerDimensions = elRadialRect.bottom
let maxHeight = elRadialRect.bottom - elRadialRect.top
chartInnerDimensions = Math.max(w.globals.radialSize * 2.05, maxHeight)
}
let newHeight = chartInnerDimensions + gl.translateY + legendHeight + offY
if (gl.dom.elLegendForeign) {
gl.dom.elLegendForeign.setAttribute('height', newHeight)
}
// fix apexcharts/apexcharts.js/issues/3105 (when % is provided in height, it keeps increasing)
if (w.config.chart.height && String(w.config.chart.height).indexOf('%') > 0)
return
gl.dom.elWrap.style.height = newHeight + 'px'
Graphics.setAttrs(gl.dom.Paper.node, {
height: newHeight
})
gl.dom.Paper.node.parentNode.parentNode.style.minHeight = newHeight + 'px'
}
/*
** All the calculations for setting range in charts will be done here
*/
coreCalculations() {
const range = new Range(this.ctx)
range.init()
}
resetGlobals() {
const resetxyValues = () => {
return this.w.config.series.map((s) => [])
}
const globalObj = new Globals()
let gl = this.w.globals
globalObj.initGlobalVars(gl)
gl.seriesXvalues = resetxyValues()
gl.seriesYvalues = resetxyValues()
}
isMultipleY() {
// user has supplied an array in yaxis property. So, turn on multipleYAxis flag
if (
this.w.config.yaxis.constructor === Array &&
this.w.config.yaxis.length > 1
) {
this.w.globals.isMultipleYAxis = true
return true
}
}
xySettings() {
let xyRatios = null
const w = this.w
if (w.globals.axisCharts) {
if (w.config.xaxis.crosshairs.position === 'back') {
const crosshairs = new Crosshairs(this.ctx)
crosshairs.drawXCrosshairs()
}
if (w.config.yaxis[0].crosshairs.position === 'back') {
const crosshairs = new Crosshairs(this.ctx)
crosshairs.drawYCrosshairs()
}
if (
w.config.xaxis.type === 'datetime' &&
w.config.xaxis.labels.formatter === undefined
) {
this.ctx.timeScale = new TimeScale(this.ctx)
let formattedTimeScale = []
if (
isFinite(w.globals.minX) &&
isFinite(w.globals.maxX) &&
!w.globals.isBarHorizontal
) {
formattedTimeScale = this.ctx.timeScale.calculateTimeScaleTicks(
w.globals.minX,
w.globals.maxX
)
} else if (w.globals.isBarHorizontal) {
formattedTimeScale = this.ctx.timeScale.calculateTimeScaleTicks(
w.globals.minY,
w.globals.maxY
)
}
this.ctx.timeScale.recalcDimensionsBasedOnFormat(formattedTimeScale)
}
const coreUtils = new CoreUtils(this.ctx)
xyRatios = coreUtils.getCalculatedRatios()
}
return xyRatios
}
updateSourceChart(targetChart) {
this.ctx.w.globals.selection = undefined
this.ctx.updateHelpers._updateOptions(
{
chart: {
selection: {
xaxis: {
min: targetChart.w.globals.minX,
max: targetChart.w.globals.maxX
}
}
}
},
false,
false
)
}
setupBrushHandler() {
const w = this.w
// only for brush charts
if (!w.config.chart.brush.enabled) {
return
}
// if user has not defined a custom function for selection - we handle the brush chart
// otherwise we leave it to the user to define the functionality for selection
if (typeof w.config.chart.events.selection !== 'function') {
let targets = w.config.chart.brush.targets || [
w.config.chart.brush.target
]
// retro compatibility with single target option
targets.forEach((target) => {
let targetChart = ApexCharts.getChartByID(target)
targetChart.w.globals.brushSource = this.ctx
if (typeof targetChart.w.config.chart.events.zoomed !== 'function') {
targetChart.w.config.chart.events.zoomed = () => {
this.updateSourceChart(targetChart)
}
}
if (typeof targetChart.w.config.chart.events.scrolled !== 'function') {
targetChart.w.config.chart.events.scrolled = () => {
this.updateSourceChart(targetChart)
}
}
})
w.config.chart.events.selection = (chart, e) => {
targets.forEach((target) => {
let targetChart = ApexCharts.getChartByID(target)
let yaxis = Utils.clone(w.config.yaxis)
if (
w.config.chart.brush.autoScaleYaxis &&
targetChart.w.globals.series.length === 1
) {
const scale = new Scales(targetChart)
yaxis = scale.autoScaleY(targetChart, yaxis, e)
}
const multipleYaxis = targetChart.w.config.yaxis.reduce(
(acc, curr, index) => {
return [
...acc,
{
...targetChart.w.config.yaxis[index],
min: yaxis[0].min,
max: yaxis[0].max
}
]
},
[]
)
targetChart.ctx.updateHelpers._updateOptions(
{
xaxis: {
min: e.xaxis.min,
max: e.xaxis.max
},
yaxis: multipleYaxis
},
false,
false,
false,
false
)
})
}
}
}
}

View File

@@ -1,386 +0,0 @@
/*
** Util functions which are dependent on ApexCharts instance
*/
class CoreUtils {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
static checkComboSeries(series) {
let comboCharts = false
let comboBarCount = 0
let comboCount = 0
// if user specified a type in series too, turn on comboCharts flag
if (series.length && typeof series[0].type !== 'undefined') {
series.forEach((s) => {
if (
s.type === 'bar' ||
s.type === 'column' ||
s.type === 'candlestick' ||
s.type === 'boxPlot'
) {
comboBarCount++
}
if (typeof s.type !== 'undefined') {
comboCount++
}
})
}
if (comboCount > 0) {
comboCharts = true
}
return {
comboBarCount,
comboCharts
}
}
/**
* @memberof CoreUtils
* returns the sum of all individual values in a multiple stacked series
* Eg. w.globals.series = [[32,33,43,12], [2,3,5,1]]
* @return [34,36,48,13]
**/
getStackedSeriesTotals() {
const w = this.w
let total = []
if (w.globals.series.length === 0) return total
for (
let i = 0;
i < w.globals.series[w.globals.maxValsInArrayIndex].length;
i++
) {
let t = 0
for (let j = 0; j < w.globals.series.length; j++) {
if (typeof w.globals.series[j][i] !== 'undefined') {
t += w.globals.series[j][i]
}
}
total.push(t)
}
w.globals.stackedSeriesTotals = total
return total
}
// get total of the all values inside all series
getSeriesTotalByIndex(index = null) {
if (index === null) {
// non-plot chart types - pie / donut / circle
return this.w.config.series.reduce((acc, cur) => acc + cur, 0)
} else {
// axis charts - supporting multiple series
return this.w.globals.series[index].reduce((acc, cur) => acc + cur, 0)
}
}
isSeriesNull(index = null) {
let r = []
if (index === null) {
// non-plot chart types - pie / donut / circle
r = this.w.config.series.filter((d) => d !== null)
} else {
// axis charts - supporting multiple series
r = this.w.config.series[index].data.filter((d) => d !== null)
}
return r.length === 0
}
seriesHaveSameValues(index) {
return this.w.globals.series[index].every((val, i, arr) => val === arr[0])
}
getCategoryLabels(labels) {
const w = this.w
let catLabels = labels.slice()
if (w.config.xaxis.convertedCatToNumeric) {
catLabels = labels.map((i, li) => {
return w.config.xaxis.labels.formatter(i - w.globals.minX + 1)
})
}
return catLabels
}
// maxValsInArrayIndex is the index of series[] which has the largest number of items
getLargestSeries() {
const w = this.w
w.globals.maxValsInArrayIndex = w.globals.series
.map((a) => a.length)
.indexOf(
Math.max.apply(
Math,
w.globals.series.map((a) => a.length)
)
)
}
getLargestMarkerSize() {
const w = this.w
let size = 0
w.globals.markers.size.forEach((m) => {
size = Math.max(size, m)
})
if (w.config.markers.discrete && w.config.markers.discrete.length) {
w.config.markers.discrete.forEach((m) => {
size = Math.max(size, m.size)
})
}
if (size > 0) {
size += w.config.markers.hover.sizeOffset + 1
}
w.globals.markers.largestSize = size
return size
}
/**
* @memberof Core
* returns the sum of all values in a series
* Eg. w.globals.series = [[32,33,43,12], [2,3,5,1]]
* @return [120, 11]
**/
getSeriesTotals() {
const w = this.w
w.globals.seriesTotals = w.globals.series.map((ser, index) => {
let total = 0
if (Array.isArray(ser)) {
for (let j = 0; j < ser.length; j++) {
total += ser[j]
}
} else {
// for pie/donuts/gauges
total += ser
}
return total
})
}
getSeriesTotalsXRange(minX, maxX) {
const w = this.w
const seriesTotalsXRange = w.globals.series.map((ser, index) => {
let total = 0
for (let j = 0; j < ser.length; j++) {
if (
w.globals.seriesX[index][j] > minX &&
w.globals.seriesX[index][j] < maxX
) {
total += ser[j]
}
}
return total
})
return seriesTotalsXRange
}
/**
* @memberof CoreUtils
* returns the percentage value of all individual values which can be used in a 100% stacked series
* Eg. w.globals.series = [[32, 33, 43, 12], [2, 3, 5, 1]]
* @return [[94.11, 91.66, 89.58, 92.30], [5.88, 8.33, 10.41, 7.7]]
**/
getPercentSeries() {
const w = this.w
w.globals.seriesPercent = w.globals.series.map((ser, index) => {
let seriesPercent = []
if (Array.isArray(ser)) {
for (let j = 0; j < ser.length; j++) {
let total = w.globals.stackedSeriesTotals[j]
let percent = 0
if (total) {
percent = (100 * ser[j]) / total
}
seriesPercent.push(percent)
}
} else {
const total = w.globals.seriesTotals.reduce((acc, val) => acc + val, 0)
let percent = (100 * ser) / total
seriesPercent.push(percent)
}
return seriesPercent
})
}
getCalculatedRatios() {
let gl = this.w.globals
let yRatio = []
let invertedYRatio = 0
let xRatio = 0
let initialXRatio = 0
let invertedXRatio = 0
let zRatio = 0
let baseLineY = []
let baseLineInvertedY = 0.1
let baseLineX = 0
gl.yRange = []
if (gl.isMultipleYAxis) {
for (let i = 0; i < gl.minYArr.length; i++) {
gl.yRange.push(Math.abs(gl.minYArr[i] - gl.maxYArr[i]))
baseLineY.push(0)
}
} else {
gl.yRange.push(Math.abs(gl.minY - gl.maxY))
}
gl.xRange = Math.abs(gl.maxX - gl.minX)
gl.zRange = Math.abs(gl.maxZ - gl.minZ)
// multiple y axis
for (let i = 0; i < gl.yRange.length; i++) {
yRatio.push(gl.yRange[i] / gl.gridHeight)
}
xRatio = gl.xRange / gl.gridWidth
initialXRatio = Math.abs(gl.initialMaxX - gl.initialMinX) / gl.gridWidth
invertedYRatio = gl.yRange / gl.gridWidth
invertedXRatio = gl.xRange / gl.gridHeight
zRatio = (gl.zRange / gl.gridHeight) * 16
if (!zRatio) {
zRatio = 1
}
if (gl.minY !== Number.MIN_VALUE && Math.abs(gl.minY) !== 0) {
// Negative numbers present in series
gl.hasNegs = true
}
if (gl.isMultipleYAxis) {
baseLineY = []
// baseline variables is the 0 of the yaxis which will be needed when there are negatives
for (let i = 0; i < yRatio.length; i++) {
baseLineY.push(-gl.minYArr[i] / yRatio[i])
}
} else {
baseLineY.push(-gl.minY / yRatio[0])
if (gl.minY !== Number.MIN_VALUE && Math.abs(gl.minY) !== 0) {
baseLineInvertedY = -gl.minY / invertedYRatio // this is for bar chart
baseLineX = gl.minX / xRatio
}
}
return {
yRatio,
invertedYRatio,
zRatio,
xRatio,
initialXRatio,
invertedXRatio,
baseLineInvertedY,
baseLineY,
baseLineX
}
}
getLogSeries(series) {
const w = this.w
w.globals.seriesLog = series.map((s, i) => {
if (w.config.yaxis[i] && w.config.yaxis[i].logarithmic) {
return s.map((d) => {
if (d === null) return null
return this.getLogVal(w.config.yaxis[i].logBase, d, i)
})
} else {
return s
}
})
return w.globals.invalidLogScale ? series : w.globals.seriesLog
}
getBaseLog(base, value) {
return Math.log(value) / Math.log(base)
}
getLogVal(b, d, yIndex) {
if (d === 0) {
return 0
}
const w = this.w
const min_log_val =
w.globals.minYArr[yIndex] === 0
? -1 // make sure we dont calculate log of 0
: this.getBaseLog(b, w.globals.minYArr[yIndex])
const max_log_val =
w.globals.maxYArr[yIndex] === 0
? 0 // make sure we dont calculate log of 0
: this.getBaseLog(b, w.globals.maxYArr[yIndex])
const number_of_height_levels = max_log_val - min_log_val
if (d < 1) return d / number_of_height_levels
const log_height_value = this.getBaseLog(b, d) - min_log_val
return log_height_value / number_of_height_levels
}
getLogYRatios(yRatio) {
const w = this.w
const gl = this.w.globals
gl.yLogRatio = yRatio.slice()
gl.logYRange = gl.yRange.map((yRange, i) => {
if (w.config.yaxis[i] && this.w.config.yaxis[i].logarithmic) {
let maxY = -Number.MAX_VALUE
let minY = Number.MIN_VALUE
let range = 1
gl.seriesLog.forEach((s, si) => {
s.forEach((v) => {
if (w.config.yaxis[si] && w.config.yaxis[si].logarithmic) {
maxY = Math.max(v, maxY)
minY = Math.min(v, minY)
}
})
})
range = Math.pow(gl.yRange[i], Math.abs(minY - maxY) / gl.yRange[i])
gl.yLogRatio[i] = range / gl.gridHeight
return range
}
})
return gl.invalidLogScale ? yRatio.slice() : gl.yLogRatio
}
// Some config objects can be array - and we need to extend them correctly
static extendArrayProps(configInstance, options, w) {
if (options.yaxis) {
options = configInstance.extendYAxis(options, w)
}
if (options.annotations) {
if (options.annotations.yaxis) {
options = configInstance.extendYAxisAnnotations(options)
}
if (options.annotations.xaxis) {
options = configInstance.extendXAxisAnnotations(options)
}
if (options.annotations.points) {
options = configInstance.extendPointAnnotations(options)
}
}
return options
}
}
export default CoreUtils

View File

@@ -1,138 +0,0 @@
import Graphics from './Graphics'
import Filters from './Filters'
import Utils from '../utils/Utils'
class Crosshairs {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
drawXCrosshairs() {
const w = this.w
let graphics = new Graphics(this.ctx)
let filters = new Filters(this.ctx)
let crosshairGradient = w.config.xaxis.crosshairs.fill.gradient
let crosshairShadow = w.config.xaxis.crosshairs.dropShadow
let fillType = w.config.xaxis.crosshairs.fill.type
let gradientFrom = crosshairGradient.colorFrom
let gradientTo = crosshairGradient.colorTo
let opacityFrom = crosshairGradient.opacityFrom
let opacityTo = crosshairGradient.opacityTo
let stops = crosshairGradient.stops
let shadow = 'none'
let dropShadow = crosshairShadow.enabled
let shadowLeft = crosshairShadow.left
let shadowTop = crosshairShadow.top
let shadowBlur = crosshairShadow.blur
let shadowColor = crosshairShadow.color
let shadowOpacity = crosshairShadow.opacity
let xcrosshairsFill = w.config.xaxis.crosshairs.fill.color
if (w.config.xaxis.crosshairs.show) {
if (fillType === 'gradient') {
xcrosshairsFill = graphics.drawGradient(
'vertical',
gradientFrom,
gradientTo,
opacityFrom,
opacityTo,
null,
stops,
null
)
}
let xcrosshairs = graphics.drawRect()
if (w.config.xaxis.crosshairs.width === 1) {
// to prevent drawing 2 lines, convert rect to line
xcrosshairs = graphics.drawLine()
}
let gridHeight = w.globals.gridHeight
if (!Utils.isNumber(gridHeight) || gridHeight < 0) {
gridHeight = 0
}
let crosshairsWidth = w.config.xaxis.crosshairs.width
if (!Utils.isNumber(crosshairsWidth) || crosshairsWidth < 0) {
crosshairsWidth = 0
}
xcrosshairs.attr({
class: 'apexcharts-xcrosshairs',
x: 0,
y: 0,
y2: gridHeight,
width: crosshairsWidth,
height: gridHeight,
fill: xcrosshairsFill,
filter: shadow,
'fill-opacity': w.config.xaxis.crosshairs.opacity,
stroke: w.config.xaxis.crosshairs.stroke.color,
'stroke-width': w.config.xaxis.crosshairs.stroke.width,
'stroke-dasharray': w.config.xaxis.crosshairs.stroke.dashArray
})
if (dropShadow) {
xcrosshairs = filters.dropShadow(xcrosshairs, {
left: shadowLeft,
top: shadowTop,
blur: shadowBlur,
color: shadowColor,
opacity: shadowOpacity
})
}
w.globals.dom.elGraphical.add(xcrosshairs)
}
}
drawYCrosshairs() {
const w = this.w
let graphics = new Graphics(this.ctx)
let crosshair = w.config.yaxis[0].crosshairs
const offX = w.globals.barPadForNumericAxis
if (w.config.yaxis[0].crosshairs.show) {
let ycrosshairs = graphics.drawLine(
-offX,
0,
w.globals.gridWidth + offX,
0,
crosshair.stroke.color,
crosshair.stroke.dashArray,
crosshair.stroke.width
)
ycrosshairs.attr({
class: 'apexcharts-ycrosshairs'
})
w.globals.dom.elGraphical.add(ycrosshairs)
}
// draw an invisible crosshair to help in positioning the yaxis tooltip
let ycrosshairsHidden = graphics.drawLine(
-offX,
0,
w.globals.gridWidth + offX,
0,
crosshair.stroke.color,
0,
0
)
ycrosshairsHidden.attr({
class: 'apexcharts-ycrosshairs-hidden'
})
w.globals.dom.elGraphical.add(ycrosshairsHidden)
}
}
export default Crosshairs

View File

@@ -1,705 +0,0 @@
import CoreUtils from './CoreUtils'
import DateTime from './../utils/DateTime'
import Series from './Series'
import Utils from '../utils/Utils'
import Defaults from './settings/Defaults'
export default class Data {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.twoDSeries = []
this.threeDSeries = []
this.twoDSeriesX = []
this.seriesGoals = []
this.coreUtils = new CoreUtils(this.ctx)
}
isMultiFormat() {
return this.isFormatXY() || this.isFormat2DArray()
}
// given format is [{x, y}, {x, y}]
isFormatXY() {
const series = this.w.config.series.slice()
const sr = new Series(this.ctx)
this.activeSeriesIndex = sr.getActiveConfigSeriesIndex()
if (
typeof series[this.activeSeriesIndex].data !== 'undefined' &&
series[this.activeSeriesIndex].data.length > 0 &&
series[this.activeSeriesIndex].data[0] !== null &&
typeof series[this.activeSeriesIndex].data[0].x !== 'undefined' &&
series[this.activeSeriesIndex].data[0] !== null
) {
return true
}
}
// given format is [[x, y], [x, y]]
isFormat2DArray() {
const series = this.w.config.series.slice()
const sr = new Series(this.ctx)
this.activeSeriesIndex = sr.getActiveConfigSeriesIndex()
if (
typeof series[this.activeSeriesIndex].data !== 'undefined' &&
series[this.activeSeriesIndex].data.length > 0 &&
typeof series[this.activeSeriesIndex].data[0] !== 'undefined' &&
series[this.activeSeriesIndex].data[0] !== null &&
series[this.activeSeriesIndex].data[0].constructor === Array
) {
return true
}
}
handleFormat2DArray(ser, i) {
const cnf = this.w.config
const gl = this.w.globals
const isBoxPlot =
cnf.chart.type === 'boxPlot' || cnf.series[i].type === 'boxPlot'
for (let j = 0; j < ser[i].data.length; j++) {
if (typeof ser[i].data[j][1] !== 'undefined') {
if (
Array.isArray(ser[i].data[j][1]) &&
ser[i].data[j][1].length === 4 &&
!isBoxPlot
) {
// candlestick nested ohlc format
this.twoDSeries.push(Utils.parseNumber(ser[i].data[j][1][3]))
} else if (ser[i].data[j].length >= 5) {
// candlestick non-nested ohlc format
this.twoDSeries.push(Utils.parseNumber(ser[i].data[j][4]))
} else {
this.twoDSeries.push(Utils.parseNumber(ser[i].data[j][1]))
}
gl.dataFormatXNumeric = true
}
if (cnf.xaxis.type === 'datetime') {
// if timestamps are provided and xaxis type is datetime,
let ts = new Date(ser[i].data[j][0])
ts = new Date(ts).getTime()
this.twoDSeriesX.push(ts)
} else {
this.twoDSeriesX.push(ser[i].data[j][0])
}
}
for (let j = 0; j < ser[i].data.length; j++) {
if (typeof ser[i].data[j][2] !== 'undefined') {
this.threeDSeries.push(ser[i].data[j][2])
gl.isDataXYZ = true
}
}
}
handleFormatXY(ser, i) {
const cnf = this.w.config
const gl = this.w.globals
const dt = new DateTime(this.ctx)
let activeI = i
if (gl.collapsedSeriesIndices.indexOf(i) > -1) {
// fix #368
activeI = this.activeSeriesIndex
}
// get series
for (let j = 0; j < ser[i].data.length; j++) {
if (typeof ser[i].data[j].y !== 'undefined') {
if (Array.isArray(ser[i].data[j].y)) {
this.twoDSeries.push(
Utils.parseNumber(ser[i].data[j].y[ser[i].data[j].y.length - 1])
)
} else {
this.twoDSeries.push(Utils.parseNumber(ser[i].data[j].y))
}
}
if (
typeof ser[i].data[j].goals !== 'undefined' &&
Array.isArray(ser[i].data[j].goals)
) {
if (typeof this.seriesGoals[i] === 'undefined') {
this.seriesGoals[i] = []
}
this.seriesGoals[i].push(ser[i].data[j].goals)
} else {
if (typeof this.seriesGoals[i] === 'undefined') {
this.seriesGoals[i] = []
}
this.seriesGoals[i].push(null)
}
}
// get seriesX
for (let j = 0; j < ser[activeI].data.length; j++) {
const isXString = typeof ser[activeI].data[j].x === 'string'
const isXArr = Array.isArray(ser[activeI].data[j].x)
const isXDate =
!isXArr && !!dt.isValidDate(ser[activeI].data[j].x.toString())
if (isXString || isXDate) {
// user supplied '01/01/2017' or a date string (a JS date object is not supported)
if (isXString || cnf.xaxis.convertedCatToNumeric) {
const isRangeColumn = gl.isBarHorizontal && gl.isRangeData
if (cnf.xaxis.type === 'datetime' && !isRangeColumn) {
this.twoDSeriesX.push(dt.parseDate(ser[activeI].data[j].x))
} else {
// a category and not a numeric x value
this.fallbackToCategory = true
this.twoDSeriesX.push(ser[activeI].data[j].x)
}
} else {
if (cnf.xaxis.type === 'datetime') {
this.twoDSeriesX.push(
dt.parseDate(ser[activeI].data[j].x.toString())
)
} else {
gl.dataFormatXNumeric = true
gl.isXNumeric = true
this.twoDSeriesX.push(parseFloat(ser[activeI].data[j].x))
}
}
} else if (isXArr) {
// a multiline label described in array format
this.fallbackToCategory = true
this.twoDSeriesX.push(ser[activeI].data[j].x)
} else {
// a numeric value in x property
gl.isXNumeric = true
gl.dataFormatXNumeric = true
this.twoDSeriesX.push(ser[activeI].data[j].x)
}
}
if (ser[i].data[0] && typeof ser[i].data[0].z !== 'undefined') {
for (let t = 0; t < ser[i].data.length; t++) {
this.threeDSeries.push(ser[i].data[t].z)
}
gl.isDataXYZ = true
}
}
handleRangeData(ser, i) {
const gl = this.w.globals
let range = {}
if (this.isFormat2DArray()) {
range = this.handleRangeDataFormat('array', ser, i)
} else if (this.isFormatXY()) {
range = this.handleRangeDataFormat('xy', ser, i)
}
gl.seriesRangeStart.push(range.start)
gl.seriesRangeEnd.push(range.end)
gl.seriesRangeBar.push(range.rangeUniques)
// check for overlaps to avoid clashes in a timeline chart
gl.seriesRangeBar.forEach((sr, si) => {
if (sr) {
sr.forEach((sarr, sarri) => {
sarr.y.forEach((arr, arri) => {
for (let sri = 0; sri < sarr.y.length; sri++) {
if (arri !== sri) {
const range1y1 = arr.y1
const range1y2 = arr.y2
const range2y1 = sarr.y[sri].y1
const range2y2 = sarr.y[sri].y2
if (range1y1 <= range2y2 && range2y1 <= range1y2) {
if (sarr.overlaps.indexOf(arr.rangeName) < 0) {
sarr.overlaps.push(arr.rangeName)
}
if (sarr.overlaps.indexOf(sarr.y[sri].rangeName) < 0) {
sarr.overlaps.push(sarr.y[sri].rangeName)
}
}
}
}
})
})
}
})
return range
}
handleCandleStickBoxData(ser, i) {
const gl = this.w.globals
let ohlc = {}
if (this.isFormat2DArray()) {
ohlc = this.handleCandleStickBoxDataFormat('array', ser, i)
} else if (this.isFormatXY()) {
ohlc = this.handleCandleStickBoxDataFormat('xy', ser, i)
}
gl.seriesCandleO[i] = ohlc.o
gl.seriesCandleH[i] = ohlc.h
gl.seriesCandleM[i] = ohlc.m
gl.seriesCandleL[i] = ohlc.l
gl.seriesCandleC[i] = ohlc.c
return ohlc
}
handleRangeDataFormat(format, ser, i) {
const rangeStart = []
const rangeEnd = []
const uniqueKeys = ser[i].data
.filter(
(thing, index, self) => index === self.findIndex((t) => t.x === thing.x)
)
.map((r, index) => {
return {
x: r.x,
overlaps: [],
y: []
}
})
const err =
'Please provide [Start, End] values in valid format. Read more https://apexcharts.com/docs/series/#rangecharts'
const serObj = new Series(this.ctx)
const activeIndex = serObj.getActiveConfigSeriesIndex()
if (format === 'array') {
if (ser[activeIndex].data[0][1].length !== 2) {
throw new Error(err)
}
for (let j = 0; j < ser[i].data.length; j++) {
rangeStart.push(ser[i].data[j][1][0])
rangeEnd.push(ser[i].data[j][1][1])
}
} else if (format === 'xy') {
if (ser[activeIndex].data[0].y.length !== 2) {
throw new Error(err)
}
for (let j = 0; j < ser[i].data.length; j++) {
const id = Utils.randomId()
const x = ser[i].data[j].x
const y = {
y1: ser[i].data[j].y[0],
y2: ser[i].data[j].y[1],
rangeName: id
}
// mutating config object by adding a new property
// TODO: As this is specifically for timeline rangebar charts, update the docs mentioning the series only supports xy format
ser[i].data[j].rangeName = id
const uI = uniqueKeys.findIndex((t) => t.x === x)
uniqueKeys[uI].y.push(y)
rangeStart.push(y.y1)
rangeEnd.push(y.y2)
}
}
return {
start: rangeStart,
end: rangeEnd,
rangeUniques: uniqueKeys
}
}
handleCandleStickBoxDataFormat(format, ser, i) {
const w = this.w
const isBoxPlot =
w.config.chart.type === 'boxPlot' || w.config.series[i].type === 'boxPlot'
const serO = []
const serH = []
const serM = []
const serL = []
const serC = []
if (format === 'array') {
if (
(isBoxPlot && ser[i].data[0].length === 6) ||
(!isBoxPlot && ser[i].data[0].length === 5)
) {
for (let j = 0; j < ser[i].data.length; j++) {
serO.push(ser[i].data[j][1])
serH.push(ser[i].data[j][2])
if (isBoxPlot) {
serM.push(ser[i].data[j][3])
serL.push(ser[i].data[j][4])
serC.push(ser[i].data[j][5])
} else {
serL.push(ser[i].data[j][3])
serC.push(ser[i].data[j][4])
}
}
} else {
for (let j = 0; j < ser[i].data.length; j++) {
if (Array.isArray(ser[i].data[j][1])) {
serO.push(ser[i].data[j][1][0])
serH.push(ser[i].data[j][1][1])
if (isBoxPlot) {
serM.push(ser[i].data[j][1][2])
serL.push(ser[i].data[j][1][3])
serC.push(ser[i].data[j][1][4])
} else {
serL.push(ser[i].data[j][1][2])
serC.push(ser[i].data[j][1][3])
}
}
}
}
} else if (format === 'xy') {
for (let j = 0; j < ser[i].data.length; j++) {
if (Array.isArray(ser[i].data[j].y)) {
serO.push(ser[i].data[j].y[0])
serH.push(ser[i].data[j].y[1])
if (isBoxPlot) {
serM.push(ser[i].data[j].y[2])
serL.push(ser[i].data[j].y[3])
serC.push(ser[i].data[j].y[4])
} else {
serL.push(ser[i].data[j].y[2])
serC.push(ser[i].data[j].y[3])
}
}
}
}
return {
o: serO,
h: serH,
m: serM,
l: serL,
c: serC
}
}
parseDataAxisCharts(ser, ctx = this.ctx) {
const cnf = this.w.config
const gl = this.w.globals
const dt = new DateTime(ctx)
const xlabels =
cnf.labels.length > 0 ? cnf.labels.slice() : cnf.xaxis.categories.slice()
gl.isRangeBar = cnf.chart.type === 'rangeBar' && gl.isBarHorizontal
gl.hasGroups =
cnf.xaxis.type === 'category' && cnf.xaxis.group.groups.length > 0
if (gl.hasGroups) {
gl.groups = cnf.xaxis.group.groups
}
const handleDates = () => {
for (let j = 0; j < xlabels.length; j++) {
if (typeof xlabels[j] === 'string') {
// user provided date strings
let isDate = dt.isValidDate(xlabels[j])
if (isDate) {
this.twoDSeriesX.push(dt.parseDate(xlabels[j]))
} else {
throw new Error(
'You have provided invalid Date format. Please provide a valid JavaScript Date'
)
}
} else {
// user provided timestamps
this.twoDSeriesX.push(xlabels[j])
}
}
}
for (let i = 0; i < ser.length; i++) {
this.twoDSeries = []
this.twoDSeriesX = []
this.threeDSeries = []
if (typeof ser[i].data === 'undefined') {
console.error(
"It is a possibility that you may have not included 'data' property in series."
)
return
}
if (
cnf.chart.type === 'rangeBar' ||
cnf.chart.type === 'rangeArea' ||
ser[i].type === 'rangeBar' ||
ser[i].type === 'rangeArea'
) {
gl.isRangeData = true
this.handleRangeData(ser, i)
}
if (this.isMultiFormat()) {
if (this.isFormat2DArray()) {
this.handleFormat2DArray(ser, i)
} else if (this.isFormatXY()) {
this.handleFormatXY(ser, i)
}
if (
cnf.chart.type === 'candlestick' ||
ser[i].type === 'candlestick' ||
cnf.chart.type === 'boxPlot' ||
ser[i].type === 'boxPlot'
) {
this.handleCandleStickBoxData(ser, i)
}
gl.series.push(this.twoDSeries)
gl.labels.push(this.twoDSeriesX)
gl.seriesX.push(this.twoDSeriesX)
gl.seriesGoals = this.seriesGoals
if (i === this.activeSeriesIndex && !this.fallbackToCategory) {
gl.isXNumeric = true
}
} else {
if (cnf.xaxis.type === 'datetime') {
// user didn't supplied [{x,y}] or [[x,y]], but single array in data.
// Also labels/categories were supplied differently
gl.isXNumeric = true
handleDates()
gl.seriesX.push(this.twoDSeriesX)
} else if (cnf.xaxis.type === 'numeric') {
gl.isXNumeric = true
if (xlabels.length > 0) {
this.twoDSeriesX = xlabels
gl.seriesX.push(this.twoDSeriesX)
}
}
gl.labels.push(this.twoDSeriesX)
const singleArray = ser[i].data.map((d) => Utils.parseNumber(d))
gl.series.push(singleArray)
}
gl.seriesZ.push(this.threeDSeries)
if (ser[i].name !== undefined) {
gl.seriesNames.push(ser[i].name)
} else {
gl.seriesNames.push('series-' + parseInt(i + 1, 10))
}
// overrided default color if user inputs color with series data
if (ser[i].color !== undefined) {
gl.seriesColors.push(ser[i].color)
} else {
gl.seriesColors.push(undefined)
}
}
return this.w
}
parseDataNonAxisCharts(ser) {
const gl = this.w.globals
const cnf = this.w.config
gl.series = ser.slice()
gl.seriesNames = cnf.labels.slice()
for (let i = 0; i < gl.series.length; i++) {
if (gl.seriesNames[i] === undefined) {
gl.seriesNames.push('series-' + (i + 1))
}
}
return this.w
}
/** User possibly set string categories in xaxis.categories or labels prop
* Or didn't set xaxis labels at all - in which case we manually do it.
* If user passed series data as [[3, 2], [4, 5]] or [{ x: 3, y: 55 }],
* this shouldn't be called
* @param {array} ser - the series which user passed to the config
*/
handleExternalLabelsData(ser) {
const cnf = this.w.config
const gl = this.w.globals
if (cnf.xaxis.categories.length > 0) {
// user provided labels in xaxis.category prop
gl.labels = cnf.xaxis.categories
} else if (cnf.labels.length > 0) {
// user provided labels in labels props
gl.labels = cnf.labels.slice()
} else if (this.fallbackToCategory) {
// user provided labels in x prop in [{ x: 3, y: 55 }] data, and those labels are already stored in gl.labels[0], so just re-arrange the gl.labels array
gl.labels = gl.labels[0]
if (gl.seriesRangeBar.length) {
gl.seriesRangeBar.map((srt) => {
srt.forEach((sr) => {
if (gl.labels.indexOf(sr.x) < 0 && sr.x) {
gl.labels.push(sr.x)
}
})
})
gl.labels = gl.labels.filter(
(elem, pos, arr) => arr.indexOf(elem) === pos
)
}
if (cnf.xaxis.convertedCatToNumeric) {
const defaults = new Defaults(cnf)
defaults.convertCatToNumericXaxis(cnf, this.ctx, gl.seriesX[0])
this._generateExternalLabels(ser)
}
} else {
this._generateExternalLabels(ser)
}
}
_generateExternalLabels(ser) {
const gl = this.w.globals
const cnf = this.w.config
// user didn't provided any labels, fallback to 1-2-3-4-5
let labelArr = []
if (gl.axisCharts) {
if (gl.series.length > 0) {
if (this.isFormatXY()) {
// in case there is a combo chart (boxplot/scatter)
// and there are duplicated x values, we need to eliminate duplicates
const seriesDataFiltered = cnf.series.map((serie, s) => {
return serie.data.filter(
(v, i, a) => a.findIndex((t) => t.x === v.x) === i
)
})
const len = seriesDataFiltered.reduce(
(p, c, i, a) => (a[p].length > c.length ? p : i),
0
)
for (let i = 0; i < seriesDataFiltered[len].length; i++) {
labelArr.push(i + 1)
}
} else {
for (let i = 0; i < gl.series[gl.maxValsInArrayIndex].length; i++) {
labelArr.push(i + 1)
}
}
}
gl.seriesX = []
// create gl.seriesX as it will be used in calculations of x positions
for (let i = 0; i < ser.length; i++) {
gl.seriesX.push(labelArr)
}
// turn on the isXNumeric flag to allow minX and maxX to function properly
gl.isXNumeric = true
}
// no series to pull labels from, put a 0-10 series
// possibly, user collapsed all series. Hence we can't work with above calc
if (labelArr.length === 0) {
labelArr = gl.axisCharts
? []
: gl.series.map((gls, glsi) => {
return glsi + 1
})
for (let i = 0; i < ser.length; i++) {
gl.seriesX.push(labelArr)
}
}
// Finally, pass the labelArr in gl.labels which will be printed on x-axis
gl.labels = labelArr
if (cnf.xaxis.convertedCatToNumeric) {
gl.categoryLabels = labelArr.map((l) => {
return cnf.xaxis.labels.formatter(l)
})
}
// Turn on this global flag to indicate no labels were provided by user
gl.noLabelsProvided = true
}
// Segregate user provided data into appropriate vars
parseData(ser) {
let w = this.w
let cnf = w.config
let gl = w.globals
this.excludeCollapsedSeriesInYAxis()
// If we detected string in X prop of series, we fallback to category x-axis
this.fallbackToCategory = false
this.ctx.core.resetGlobals()
this.ctx.core.isMultipleY()
if (gl.axisCharts) {
// axisCharts includes line / area / column / scatter
this.parseDataAxisCharts(ser)
} else {
// non-axis charts are pie / donut
this.parseDataNonAxisCharts(ser)
}
this.coreUtils.getLargestSeries()
// set Null values to 0 in all series when user hides/shows some series
if (cnf.chart.type === 'bar' && cnf.chart.stacked) {
const series = new Series(this.ctx)
gl.series = series.setNullSeriesToZeroValues(gl.series)
}
this.coreUtils.getSeriesTotals()
if (gl.axisCharts) {
this.coreUtils.getStackedSeriesTotals()
}
this.coreUtils.getPercentSeries()
if (
!gl.dataFormatXNumeric &&
(!gl.isXNumeric ||
(cnf.xaxis.type === 'numeric' &&
cnf.labels.length === 0 &&
cnf.xaxis.categories.length === 0))
) {
// x-axis labels couldn't be detected; hence try searching every option in config
this.handleExternalLabelsData(ser)
}
// check for multiline xaxis
const catLabels = this.coreUtils.getCategoryLabels(gl.labels)
for (let l = 0; l < catLabels.length; l++) {
if (Array.isArray(catLabels[l])) {
gl.isMultiLineX = true
break
}
}
}
excludeCollapsedSeriesInYAxis() {
const w = this.w
w.globals.ignoreYAxisIndexes = w.globals.collapsedSeries.map(
(collapsed, i) => {
// fix issue #1215
// if stacked, not returning collapsed.index to preserve yaxis
if (this.w.globals.isMultipleYAxis && !w.config.chart.stacked) {
return collapsed.index
}
}
)
}
}

View File

@@ -1,373 +0,0 @@
import Scatter from './../charts/Scatter'
import Graphics from './Graphics'
import Filters from './Filters'
/**
* ApexCharts DataLabels Class for drawing dataLabels on Axes based Charts.
*
* @module DataLabels
**/
class DataLabels {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
// When there are many datalabels to be printed, and some of them overlaps each other in the same series, this method will take care of that
// Also, when datalabels exceeds the drawable area and get clipped off, we need to adjust and move some pixels to make them visible again
dataLabelsCorrection(
x,
y,
val,
i,
dataPointIndex,
alwaysDrawDataLabel,
fontSize
) {
let w = this.w
let graphics = new Graphics(this.ctx)
let drawnextLabel = false //
let textRects = graphics.getTextRects(val, fontSize)
let width = textRects.width
let height = textRects.height
if (y < 0) y = 0
if (y > w.globals.gridHeight + height) y = w.globals.gridHeight + height / 2
// first value in series, so push an empty array
if (typeof w.globals.dataLabelsRects[i] === 'undefined')
w.globals.dataLabelsRects[i] = []
// then start pushing actual rects in that sub-array
w.globals.dataLabelsRects[i].push({ x, y, width, height })
let len = w.globals.dataLabelsRects[i].length - 2
let lastDrawnIndex =
typeof w.globals.lastDrawnDataLabelsIndexes[i] !== 'undefined'
? w.globals.lastDrawnDataLabelsIndexes[i][
w.globals.lastDrawnDataLabelsIndexes[i].length - 1
]
: 0
if (typeof w.globals.dataLabelsRects[i][len] !== 'undefined') {
let lastDataLabelRect = w.globals.dataLabelsRects[i][lastDrawnIndex]
if (
// next label forward and x not intersecting
x > lastDataLabelRect.x + lastDataLabelRect.width + 2 ||
y > lastDataLabelRect.y + lastDataLabelRect.height + 2 ||
x + width < lastDataLabelRect.x // next label is going to be drawn backwards
) {
// the 2 indexes don't override, so OK to draw next label
drawnextLabel = true
}
}
if (dataPointIndex === 0 || alwaysDrawDataLabel) {
drawnextLabel = true
}
return {
x,
y,
textRects,
drawnextLabel
}
}
drawDataLabel(pos, i, j, z = null, strokeWidth = 2) {
// this method handles line, area, bubble, scatter charts as those charts contains markers/points which have pre-defined x/y positions
// all other charts like radar / bars / heatmaps will define their own drawDataLabel routine
let w = this.w
const graphics = new Graphics(this.ctx)
let dataLabelsConfig = w.config.dataLabels
let x = 0
let y = 0
let dataPointIndex = j
let elDataLabelsWrap = null
if (!dataLabelsConfig.enabled || !Array.isArray(pos.x)) {
return elDataLabelsWrap
}
elDataLabelsWrap = graphics.group({
class: 'apexcharts-data-labels'
})
for (let q = 0; q < pos.x.length; q++) {
x = pos.x[q] + dataLabelsConfig.offsetX
y = pos.y[q] + dataLabelsConfig.offsetY + strokeWidth
if (!isNaN(x)) {
// a small hack as we have 2 points for the first val to connect it
if (j === 1 && q === 0) dataPointIndex = 0
if (j === 1 && q === 1) dataPointIndex = 1
let val = w.globals.series[i][dataPointIndex]
let text = ''
const getText = (v) => {
return w.config.dataLabels.formatter(v, {
ctx: this.ctx,
seriesIndex: i,
dataPointIndex,
w
})
}
if (w.config.chart.type === 'bubble') {
val = w.globals.seriesZ[i][dataPointIndex]
text = getText(val)
y = pos.y[q]
const scatter = new Scatter(this.ctx)
let centerTextInBubbleCoords = scatter.centerTextInBubble(
y,
i,
dataPointIndex
)
y = centerTextInBubbleCoords.y
} else {
if (typeof val !== 'undefined') {
text = getText(val)
}
}
this.plotDataLabelsText({
x,
y,
text,
i,
j: dataPointIndex,
parent: elDataLabelsWrap,
offsetCorrection: true,
dataLabelsConfig: w.config.dataLabels
})
}
}
return elDataLabelsWrap
}
plotDataLabelsText(opts) {
let w = this.w
let graphics = new Graphics(this.ctx)
let {
x,
y,
i,
j,
text,
textAnchor,
fontSize,
parent,
dataLabelsConfig,
color,
alwaysDrawDataLabel,
offsetCorrection
} = opts
if (Array.isArray(w.config.dataLabels.enabledOnSeries)) {
if (w.config.dataLabels.enabledOnSeries.indexOf(i) < 0) {
return
}
}
let correctedLabels = {
x,
y,
drawnextLabel: true,
textRects: null
}
if (offsetCorrection) {
correctedLabels = this.dataLabelsCorrection(
x,
y,
text,
i,
j,
alwaysDrawDataLabel,
parseInt(dataLabelsConfig.style.fontSize, 10)
)
}
// when zoomed, we don't need to correct labels offsets,
// but if normally, labels get cropped, correct them
if (!w.globals.zoomed) {
x = correctedLabels.x
y = correctedLabels.y
}
if (correctedLabels.textRects) {
// fixes #2264
if (
x < -10 - correctedLabels.textRects.width ||
x > w.globals.gridWidth + correctedLabels.textRects.width + 10
) {
// datalabels fall outside drawing area, so draw a blank label
text = ''
}
}
let dataLabelColor = w.globals.dataLabels.style.colors[i]
if (
((w.config.chart.type === 'bar' || w.config.chart.type === 'rangeBar') &&
w.config.plotOptions.bar.distributed) ||
w.config.dataLabels.distributed
) {
dataLabelColor = w.globals.dataLabels.style.colors[j]
}
if (typeof dataLabelColor === 'function') {
dataLabelColor = dataLabelColor({
series: w.globals.series,
seriesIndex: i,
dataPointIndex: j,
w
})
}
if (color) {
dataLabelColor = color
}
let offX = dataLabelsConfig.offsetX
let offY = dataLabelsConfig.offsetY
if (w.config.chart.type === 'bar' || w.config.chart.type === 'rangeBar') {
// for certain chart types, we handle offsets while calculating datalabels pos
// why? because bars/column may have negative values and based on that
// offsets becomes reversed
offX = 0
offY = 0
}
if (correctedLabels.drawnextLabel) {
let dataLabelText = graphics.drawText({
width: 100,
height: parseInt(dataLabelsConfig.style.fontSize, 10),
x: x + offX,
y: y + offY,
foreColor: dataLabelColor,
textAnchor: textAnchor || dataLabelsConfig.textAnchor,
text,
fontSize: fontSize || dataLabelsConfig.style.fontSize,
fontFamily: dataLabelsConfig.style.fontFamily,
fontWeight: dataLabelsConfig.style.fontWeight || 'normal'
})
dataLabelText.attr({
class: 'apexcharts-datalabel',
cx: x,
cy: y
})
if (dataLabelsConfig.dropShadow.enabled) {
const textShadow = dataLabelsConfig.dropShadow
const filters = new Filters(this.ctx)
filters.dropShadow(dataLabelText, textShadow)
}
parent.add(dataLabelText)
if (typeof w.globals.lastDrawnDataLabelsIndexes[i] === 'undefined') {
w.globals.lastDrawnDataLabelsIndexes[i] = []
}
w.globals.lastDrawnDataLabelsIndexes[i].push(j)
}
}
addBackgroundToDataLabel(el, coords) {
const w = this.w
const bCnf = w.config.dataLabels.background
const paddingH = bCnf.padding
const paddingV = bCnf.padding / 2
const width = coords.width
const height = coords.height
const graphics = new Graphics(this.ctx)
const elRect = graphics.drawRect(
coords.x - paddingH,
coords.y - paddingV / 2,
width + paddingH * 2,
height + paddingV,
bCnf.borderRadius,
w.config.chart.background === 'transparent'
? '#fff'
: w.config.chart.background,
bCnf.opacity,
bCnf.borderWidth,
bCnf.borderColor
)
if (bCnf.dropShadow.enabled) {
const filters = new Filters(this.ctx)
filters.dropShadow(elRect, bCnf.dropShadow)
}
return elRect
}
dataLabelsBackground() {
const w = this.w
if (w.config.chart.type === 'bubble') return
const elDataLabels = w.globals.dom.baseEl.querySelectorAll(
'.apexcharts-datalabels text'
)
for (let i = 0; i < elDataLabels.length; i++) {
const el = elDataLabels[i]
const coords = el.getBBox()
let elRect = null
if (coords.width && coords.height) {
elRect = this.addBackgroundToDataLabel(el, coords)
}
if (elRect) {
el.parentNode.insertBefore(elRect.node, el)
const background = el.getAttribute('fill')
const shouldAnim =
w.config.chart.animations.enabled &&
!w.globals.resized &&
!w.globals.dataChanged
if (shouldAnim) {
elRect.animate().attr({ fill: background })
} else {
elRect.attr({ fill: background })
}
el.setAttribute('fill', w.config.dataLabels.background.foreColor)
}
}
}
bringForward() {
const w = this.w
const elDataLabelsNodes = w.globals.dom.baseEl.querySelectorAll(
'.apexcharts-datalabels'
)
const elSeries = w.globals.dom.baseEl.querySelector(
'.apexcharts-plot-series:last-child'
)
for (let i = 0; i < elDataLabelsNodes.length; i++) {
if (elSeries) {
elSeries.insertBefore(elDataLabelsNodes[i], elSeries.nextSibling)
}
}
}
}
export default DataLabels

View File

@@ -1,118 +0,0 @@
import Utils from '../utils/Utils'
export default class Events {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.documentEvent = Utils.bind(this.documentEvent, this)
}
addEventListener(name, handler) {
const w = this.w
if (w.globals.events.hasOwnProperty(name)) {
w.globals.events[name].push(handler)
} else {
w.globals.events[name] = [handler]
}
}
removeEventListener(name, handler) {
const w = this.w
if (!w.globals.events.hasOwnProperty(name)) {
return
}
let index = w.globals.events[name].indexOf(handler)
if (index !== -1) {
w.globals.events[name].splice(index, 1)
}
}
fireEvent(name, args) {
const w = this.w
if (!w.globals.events.hasOwnProperty(name)) {
return
}
if (!args || !args.length) {
args = []
}
let evs = w.globals.events[name]
let l = evs.length
for (let i = 0; i < l; i++) {
evs[i].apply(null, args)
}
}
setupEventHandlers() {
const w = this.w
const me = this.ctx
let clickableArea = w.globals.dom.baseEl.querySelector(w.globals.chartClass)
this.ctx.eventList.forEach((event) => {
clickableArea.addEventListener(
event,
(e) => {
const opts = Object.assign({}, w, {
seriesIndex: w.globals.capturedSeriesIndex,
dataPointIndex: w.globals.capturedDataPointIndex
})
if (e.type === 'mousemove' || e.type === 'touchmove') {
if (typeof w.config.chart.events.mouseMove === 'function') {
w.config.chart.events.mouseMove(e, me, opts)
}
} else if (e.type === 'mouseleave' || e.type === 'touchleave') {
if (typeof w.config.chart.events.mouseLeave === 'function') {
w.config.chart.events.mouseLeave(e, me, opts)
}
} else if (
(e.type === 'mouseup' && e.which === 1) ||
e.type === 'touchend'
) {
if (typeof w.config.chart.events.click === 'function') {
w.config.chart.events.click(e, me, opts)
}
me.ctx.events.fireEvent('click', [e, me, opts])
}
},
{ capture: false, passive: true }
)
})
this.ctx.eventList.forEach((event) => {
w.globals.dom.baseEl.addEventListener(event, this.documentEvent, {
passive: true
})
})
this.ctx.core.setupBrushHandler()
}
documentEvent(e) {
const w = this.w
const target = e.target.className
if (e.type === 'click') {
let elMenu = w.globals.dom.baseEl.querySelector('.apexcharts-menu')
if (
elMenu &&
elMenu.classList.contains('apexcharts-menu-open') &&
target !== 'apexcharts-menu-icon'
) {
elMenu.classList.remove('apexcharts-menu-open')
}
}
w.globals.clientX =
e.type === 'touchmove' ? e.touches[0].clientX : e.clientX
w.globals.clientY =
e.type === 'touchmove' ? e.touches[0].clientY : e.clientY
}
}

View File

@@ -1,364 +0,0 @@
import Data from '../modules/Data'
import AxesUtils from '../modules/axes/AxesUtils'
import Series from '../modules/Series'
import Utils from '../utils/Utils'
class Exports {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
scaleSvgNode(svg, scale) {
// get current both width and height of the svg
let svgWidth = parseFloat(svg.getAttributeNS(null, 'width'))
let svgHeight = parseFloat(svg.getAttributeNS(null, 'height'))
// set new width and height based on the scale
svg.setAttributeNS(null, 'width', svgWidth * scale)
svg.setAttributeNS(null, 'height', svgHeight * scale)
svg.setAttributeNS(null, 'viewBox', '0 0 ' + svgWidth + ' ' + svgHeight)
}
fixSvgStringForIe11(svgData) {
// IE11 generates broken SVG that we have to fix by using regex
if (!Utils.isIE11()) {
// not IE11 - noop
return svgData.replace(/&nbsp;/g, '&#160;')
}
// replace second occurrence of "xmlns" attribute with "xmlns:xlink" with correct url + add xmlns:svgjs
let nXmlnsSeen = 0
let result = svgData.replace(
/xmlns="http:\/\/www.w3.org\/2000\/svg"/g,
(match) => {
nXmlnsSeen++
return nXmlnsSeen === 2
? 'xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev"'
: match
}
)
// remove the invalid empty namespace declarations
result = result.replace(/xmlns:NS\d+=""/g, '')
// remove these broken namespaces from attributes
result = result.replace(/NS\d+:(\w+:\w+=")/g, '$1')
return result
}
getSvgString(scale) {
let svgString = this.w.globals.dom.Paper.svg()
// in case the scale is different than 1, the svg needs to be rescaled
if (scale !== 1) {
// clone the svg node so it remains intact in the UI
const svgNode = this.w.globals.dom.Paper.node.cloneNode(true)
// scale the image
this.scaleSvgNode(svgNode, scale)
// get the string representation of the svgNode
svgString = new XMLSerializer().serializeToString(svgNode)
}
return this.fixSvgStringForIe11(svgString)
}
cleanup() {
const w = this.w
// hide some elements to avoid printing them on exported svg
const xcrosshairs = w.globals.dom.baseEl.getElementsByClassName(
'apexcharts-xcrosshairs'
)
const ycrosshairs = w.globals.dom.baseEl.getElementsByClassName(
'apexcharts-ycrosshairs'
)
const zoomSelectionRects = w.globals.dom.baseEl.querySelectorAll(
'.apexcharts-zoom-rect, .apexcharts-selection-rect'
)
Array.prototype.forEach.call(zoomSelectionRects, (z) => {
z.setAttribute('width', 0)
})
if (xcrosshairs && xcrosshairs[0]) {
xcrosshairs[0].setAttribute('x', -500)
xcrosshairs[0].setAttribute('x1', -500)
xcrosshairs[0].setAttribute('x2', -500)
}
if (ycrosshairs && ycrosshairs[0]) {
ycrosshairs[0].setAttribute('y', -100)
ycrosshairs[0].setAttribute('y1', -100)
ycrosshairs[0].setAttribute('y2', -100)
}
}
svgUrl() {
this.cleanup()
const svgData = this.getSvgString()
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
return URL.createObjectURL(svgBlob)
}
dataURI(options) {
return new Promise((resolve) => {
const w = this.w
const scale = options
? options.scale || options.width / w.globals.svgWidth
: 1
this.cleanup()
const canvas = document.createElement('canvas')
canvas.width = w.globals.svgWidth * scale
canvas.height = parseInt(w.globals.dom.elWrap.style.height, 10) * scale // because of resizeNonAxisCharts
const canvasBg =
w.config.chart.background === 'transparent'
? '#fff'
: w.config.chart.background
let ctx = canvas.getContext('2d')
ctx.fillStyle = canvasBg
ctx.fillRect(0, 0, canvas.width * scale, canvas.height * scale)
const svgData = this.getSvgString(scale)
if (window.canvg && Utils.isIE11()) {
// use canvg as a polyfill to workaround ie11 considering a canvas with loaded svg 'unsafe'
// without ignoreClear we lose our background color; without ignoreDimensions some grid lines become invisible
let v = window.canvg.Canvg.fromString(ctx, svgData, {
ignoreClear: true,
ignoreDimensions: true
})
// render the svg to canvas
v.start()
let blob = canvas.msToBlob()
// dispose - missing this will cause a memory leak
v.stop()
resolve({ blob })
} else {
const svgUrl = 'data:image/svg+xml,' + encodeURIComponent(svgData)
let img = new Image()
img.crossOrigin = 'anonymous'
img.onload = () => {
ctx.drawImage(img, 0, 0)
if (canvas.msToBlob) {
// IE and Edge can't navigate to data urls, so we return the blob instead
let blob = canvas.msToBlob()
resolve({ blob })
} else {
let imgURI = canvas.toDataURL('image/png')
resolve({ imgURI })
}
}
img.src = svgUrl
}
})
}
exportToSVG() {
this.triggerDownload(
this.svgUrl(),
this.w.config.chart.toolbar.export.svg.filename,
'.svg'
)
}
exportToPng() {
this.dataURI().then(({ imgURI, blob }) => {
if (blob) {
navigator.msSaveOrOpenBlob(blob, this.w.globals.chartID + '.png')
} else {
this.triggerDownload(
imgURI,
this.w.config.chart.toolbar.export.png.filename,
'.png'
)
}
})
}
exportToCSV({ series, columnDelimiter, lineDelimiter = '\n' }) {
const w = this.w
let columns = []
let rows = []
let result = ''
let universalBOM = '\uFEFF'
const isTimeStamp = (num) => {
return w.config.xaxis.type === 'datetime' && String(num).length >= 10
}
const dataFormat = new Data(this.ctx)
const axesUtils = new AxesUtils(this.ctx)
const getCat = (i) => {
let cat = ''
// pie / donut/ radial
if (!w.globals.axisCharts) {
cat = w.config.labels[i]
} else {
// xy charts
// non datetime
if (
w.config.xaxis.type === 'category' ||
w.config.xaxis.convertedCatToNumeric
) {
if (w.globals.isBarHorizontal) {
let lbFormatter = w.globals.yLabelFormatters[0]
let sr = new Series(this.ctx)
let activeSeries = sr.getActiveConfigSeriesIndex()
cat = lbFormatter(w.globals.labels[i], {
seriesIndex: activeSeries,
dataPointIndex: i,
w
})
} else {
cat = axesUtils.getLabel(
w.globals.labels,
w.globals.timescaleLabels,
0,
i
).text
}
}
// datetime, but labels specified in categories or labels
if (w.config.xaxis.type === 'datetime') {
if (w.config.xaxis.categories.length) {
cat = w.config.xaxis.categories[i]
} else if (w.config.labels.length) {
cat = w.config.labels[i]
}
}
}
if (Array.isArray(cat)) {
cat = cat.join(' ')
}
return Utils.isNumber(cat) ? cat : cat.split(columnDelimiter).join('')
}
const handleAxisRowsColumns = (s, sI) => {
if (columns.length && sI === 0) {
rows.push(columns.join(columnDelimiter))
}
if (s.data && s.data.length) {
for (let i = 0; i < s.data.length; i++) {
columns = []
let cat = getCat(i)
if (!cat) {
if (dataFormat.isFormatXY()) {
cat = series[sI].data[i].x
} else if (dataFormat.isFormat2DArray()) {
cat = series[sI].data[i] ? series[sI].data[i][0] : ''
}
}
if (sI === 0) {
columns.push(
isTimeStamp(cat)
? w.config.chart.toolbar.export.csv.dateFormatter(cat)
: Utils.isNumber(cat)
? cat
: cat.split(columnDelimiter).join('')
)
for (let ci = 0; ci < w.globals.series.length; ci++) {
columns.push(w.globals.series[ci][i])
}
}
if (
w.config.chart.type === 'candlestick' ||
(s.type && s.type === 'candlestick')
) {
columns.pop()
columns.push(w.globals.seriesCandleO[sI][i])
columns.push(w.globals.seriesCandleH[sI][i])
columns.push(w.globals.seriesCandleL[sI][i])
columns.push(w.globals.seriesCandleC[sI][i])
}
if (
w.config.chart.type === 'boxPlot' ||
(s.type && s.type === 'boxPlot')
) {
columns.pop()
columns.push(w.globals.seriesCandleO[sI][i])
columns.push(w.globals.seriesCandleH[sI][i])
columns.push(w.globals.seriesCandleM[sI][i])
columns.push(w.globals.seriesCandleL[sI][i])
columns.push(w.globals.seriesCandleC[sI][i])
}
if (w.config.chart.type === 'rangeBar') {
columns.pop()
columns.push(w.globals.seriesRangeStart[sI][i])
columns.push(w.globals.seriesRangeEnd[sI][i])
}
if (columns.length) {
rows.push(columns.join(columnDelimiter))
}
}
}
}
columns.push(w.config.chart.toolbar.export.csv.headerCategory)
series.map((s, sI) => {
const sname = s.name ? s.name : `series-${sI}`
if (w.globals.axisCharts) {
columns.push(
sname.split(columnDelimiter).join('')
? sname.split(columnDelimiter).join('')
: `series-${sI}`
)
}
})
if (!w.globals.axisCharts) {
columns.push(w.config.chart.toolbar.export.csv.headerValue)
rows.push(columns.join(columnDelimiter))
}
series.map((s, sI) => {
if (w.globals.axisCharts) {
handleAxisRowsColumns(s, sI)
} else {
columns = []
columns.push(w.globals.labels[sI].split(columnDelimiter).join(''))
columns.push(w.globals.series[sI])
rows.push(columns.join(columnDelimiter))
}
})
result += rows.join(lineDelimiter)
this.triggerDownload(
'data:text/csv; charset=utf-8,' +
encodeURIComponent(universalBOM + result),
w.config.chart.toolbar.export.csv.filename,
'.csv'
)
}
triggerDownload(href, filename, ext) {
const downloadLink = document.createElement('a')
downloadLink.href = href
downloadLink.download = (filename ? filename : this.w.globals.chartID) + ext
document.body.appendChild(downloadLink)
downloadLink.click()
document.body.removeChild(downloadLink)
}
}
export default Exports

View File

@@ -1,381 +0,0 @@
import Graphics from './Graphics'
import Utils from '../utils/Utils'
/**
* ApexCharts Fill Class for setting fill options of the paths.
*
* @module Fill
**/
class Fill {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.opts = null
this.seriesIndex = 0
}
clippedImgArea(params) {
let w = this.w
let cnf = w.config
let svgW = parseInt(w.globals.gridWidth, 10)
let svgH = parseInt(w.globals.gridHeight, 10)
let size = svgW > svgH ? svgW : svgH
let fillImg = params.image
let imgWidth = 0
let imgHeight = 0
if (
typeof params.width === 'undefined' &&
typeof params.height === 'undefined'
) {
if (
cnf.fill.image.width !== undefined &&
cnf.fill.image.height !== undefined
) {
imgWidth = cnf.fill.image.width + 1
imgHeight = cnf.fill.image.height
} else {
imgWidth = size + 1
imgHeight = size
}
} else {
imgWidth = params.width
imgHeight = params.height
}
let elPattern = document.createElementNS(w.globals.SVGNS, 'pattern')
Graphics.setAttrs(elPattern, {
id: params.patternID,
patternUnits: params.patternUnits
? params.patternUnits
: 'userSpaceOnUse',
width: imgWidth + 'px',
height: imgHeight + 'px'
})
let elImage = document.createElementNS(w.globals.SVGNS, 'image')
elPattern.appendChild(elImage)
elImage.setAttributeNS(window.SVG.xlink, 'href', fillImg)
Graphics.setAttrs(elImage, {
x: 0,
y: 0,
preserveAspectRatio: 'none',
width: imgWidth + 'px',
height: imgHeight + 'px'
})
elImage.style.opacity = params.opacity
w.globals.dom.elDefs.node.appendChild(elPattern)
}
getSeriesIndex(opts) {
const w = this.w
if (
((w.config.chart.type === 'bar' || w.config.chart.type === 'rangeBar') &&
w.config.plotOptions.bar.distributed) ||
w.config.chart.type === 'heatmap' ||
w.config.chart.type === 'treemap'
) {
this.seriesIndex = opts.seriesNumber
} else {
this.seriesIndex = opts.seriesNumber % w.globals.series.length
}
return this.seriesIndex
}
fillPath(opts) {
let w = this.w
this.opts = opts
let cnf = this.w.config
let pathFill
let patternFill, gradientFill
this.seriesIndex = this.getSeriesIndex(opts)
let fillColors = this.getFillColors()
let fillColor = fillColors[this.seriesIndex]
//override fillcolor if user inputted color with data
if (w.globals.seriesColors[this.seriesIndex] !== undefined) {
fillColor = w.globals.seriesColors[this.seriesIndex]
}
if (typeof fillColor === 'function') {
fillColor = fillColor({
seriesIndex: this.seriesIndex,
dataPointIndex: opts.dataPointIndex,
value: opts.value,
w
})
}
let fillType = this.getFillType(this.seriesIndex)
let fillOpacity = Array.isArray(cnf.fill.opacity)
? cnf.fill.opacity[this.seriesIndex]
: cnf.fill.opacity
if (opts.color) {
fillColor = opts.color
}
let defaultColor = fillColor
if (fillColor.indexOf('rgb') === -1) {
if (fillColor.length < 9) {
// if the hex contains alpha and is of 9 digit, skip the opacity
defaultColor = Utils.hexToRgba(fillColor, fillOpacity)
}
} else {
if (fillColor.indexOf('rgba') > -1) {
fillOpacity = Utils.getOpacityFromRGBA(fillColor)
}
}
if (opts.opacity) fillOpacity = opts.opacity
if (fillType === 'pattern') {
patternFill = this.handlePatternFill(
patternFill,
fillColor,
fillOpacity,
defaultColor
)
}
if (fillType === 'gradient') {
gradientFill = this.handleGradientFill(
fillColor,
fillOpacity,
this.seriesIndex
)
}
if (fillType === 'image') {
let imgSrc = cnf.fill.image.src
let patternID = opts.patternID ? opts.patternID : ''
this.clippedImgArea({
opacity: fillOpacity,
image: Array.isArray(imgSrc)
? opts.seriesNumber < imgSrc.length
? imgSrc[opts.seriesNumber]
: imgSrc[0]
: imgSrc,
width: opts.width ? opts.width : undefined,
height: opts.height ? opts.height : undefined,
patternUnits: opts.patternUnits,
patternID: `pattern${w.globals.cuid}${opts.seriesNumber +
1}${patternID}`
})
pathFill = `url(#pattern${w.globals.cuid}${opts.seriesNumber +
1}${patternID})`
} else if (fillType === 'gradient') {
pathFill = gradientFill
} else if (fillType === 'pattern') {
pathFill = patternFill
} else {
pathFill = defaultColor
}
// override pattern/gradient if opts.solid is true
if (opts.solid) {
pathFill = defaultColor
}
return pathFill
}
getFillType(seriesIndex) {
const w = this.w
if (Array.isArray(w.config.fill.type)) {
return w.config.fill.type[seriesIndex]
} else {
return w.config.fill.type
}
}
getFillColors() {
const w = this.w
const cnf = w.config
const opts = this.opts
let fillColors = []
if (w.globals.comboCharts) {
if (w.config.series[this.seriesIndex].type === 'line') {
if (Array.isArray(w.globals.stroke.colors)) {
fillColors = w.globals.stroke.colors
} else {
fillColors.push(w.globals.stroke.colors)
}
} else {
if (Array.isArray(w.globals.fill.colors)) {
fillColors = w.globals.fill.colors
} else {
fillColors.push(w.globals.fill.colors)
}
}
} else {
if (cnf.chart.type === 'line') {
if (Array.isArray(w.globals.stroke.colors)) {
fillColors = w.globals.stroke.colors
} else {
fillColors.push(w.globals.stroke.colors)
}
} else {
if (Array.isArray(w.globals.fill.colors)) {
fillColors = w.globals.fill.colors
} else {
fillColors.push(w.globals.fill.colors)
}
}
}
// colors passed in arguments
if (typeof opts.fillColors !== 'undefined') {
fillColors = []
if (Array.isArray(opts.fillColors)) {
fillColors = opts.fillColors.slice()
} else {
fillColors.push(opts.fillColors)
}
}
return fillColors
}
handlePatternFill(patternFill, fillColor, fillOpacity, defaultColor) {
const cnf = this.w.config
const opts = this.opts
let graphics = new Graphics(this.ctx)
let patternStrokeWidth =
cnf.fill.pattern.strokeWidth === undefined
? Array.isArray(cnf.stroke.width)
? cnf.stroke.width[this.seriesIndex]
: cnf.stroke.width
: Array.isArray(cnf.fill.pattern.strokeWidth)
? cnf.fill.pattern.strokeWidth[this.seriesIndex]
: cnf.fill.pattern.strokeWidth
let patternLineColor = fillColor
if (Array.isArray(cnf.fill.pattern.style)) {
if (typeof cnf.fill.pattern.style[opts.seriesNumber] !== 'undefined') {
let pf = graphics.drawPattern(
cnf.fill.pattern.style[opts.seriesNumber],
cnf.fill.pattern.width,
cnf.fill.pattern.height,
patternLineColor,
patternStrokeWidth,
fillOpacity
)
patternFill = pf
} else {
patternFill = defaultColor
}
} else {
patternFill = graphics.drawPattern(
cnf.fill.pattern.style,
cnf.fill.pattern.width,
cnf.fill.pattern.height,
patternLineColor,
patternStrokeWidth,
fillOpacity
)
}
return patternFill
}
handleGradientFill(fillColor, fillOpacity, i) {
const cnf = this.w.config
const opts = this.opts
let graphics = new Graphics(this.ctx)
let utils = new Utils()
let type = cnf.fill.gradient.type
let gradientFrom = fillColor
let gradientTo
let opacityFrom =
cnf.fill.gradient.opacityFrom === undefined
? fillOpacity
: Array.isArray(cnf.fill.gradient.opacityFrom)
? cnf.fill.gradient.opacityFrom[i]
: cnf.fill.gradient.opacityFrom
if (gradientFrom.indexOf('rgba') > -1) {
opacityFrom = Utils.getOpacityFromRGBA(gradientFrom)
}
let opacityTo =
cnf.fill.gradient.opacityTo === undefined
? fillOpacity
: Array.isArray(cnf.fill.gradient.opacityTo)
? cnf.fill.gradient.opacityTo[i]
: cnf.fill.gradient.opacityTo
if (
cnf.fill.gradient.gradientToColors === undefined ||
cnf.fill.gradient.gradientToColors.length === 0
) {
if (cnf.fill.gradient.shade === 'dark') {
gradientTo = utils.shadeColor(
parseFloat(cnf.fill.gradient.shadeIntensity) * -1,
fillColor.indexOf('rgb') > -1 ? Utils.rgb2hex(fillColor) : fillColor
)
} else {
gradientTo = utils.shadeColor(
parseFloat(cnf.fill.gradient.shadeIntensity),
fillColor.indexOf('rgb') > -1 ? Utils.rgb2hex(fillColor) : fillColor
)
}
} else {
if (cnf.fill.gradient.gradientToColors[opts.seriesNumber]) {
const gToColor = cnf.fill.gradient.gradientToColors[opts.seriesNumber]
gradientTo = gToColor
if (gToColor.indexOf('rgba') > -1) {
opacityTo = Utils.getOpacityFromRGBA(gToColor)
}
} else {
gradientTo = fillColor
}
}
if (cnf.fill.gradient.inverseColors) {
let t = gradientFrom
gradientFrom = gradientTo
gradientTo = t
}
if (gradientFrom.indexOf('rgb') > -1) {
gradientFrom = Utils.rgb2hex(gradientFrom)
}
if (gradientTo.indexOf('rgb') > -1) {
gradientTo = Utils.rgb2hex(gradientTo)
}
return graphics.drawGradient(
type,
gradientFrom,
gradientTo,
opacityFrom,
opacityTo,
opts.size,
cnf.fill.gradient.stops,
cnf.fill.gradient.colorStops,
i
)
}
}
export default Fill

View File

@@ -1,212 +0,0 @@
import Utils from './../utils/Utils'
/**
* ApexCharts Filters Class for setting hover/active states on the paths.
*
* @module Formatters
**/
class Filters {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
// create a re-usable filter which can be appended other filter effects and applied to multiple elements
getDefaultFilter(el, i) {
const w = this.w
el.unfilter(true)
let filter = new window.SVG.Filter()
filter.size('120%', '180%', '-5%', '-40%')
if (w.config.states.normal.filter !== 'none') {
this.applyFilter(
el,
i,
w.config.states.normal.filter.type,
w.config.states.normal.filter.value
)
} else {
if (w.config.chart.dropShadow.enabled) {
this.dropShadow(el, w.config.chart.dropShadow, i)
}
}
}
addNormalFilter(el, i) {
const w = this.w
// revert shadow if it was there
// but, ignore marker as marker don't have dropshadow yet
if (
w.config.chart.dropShadow.enabled &&
!el.node.classList.contains('apexcharts-marker')
) {
this.dropShadow(el, w.config.chart.dropShadow, i)
}
}
// appends dropShadow to the filter object which can be chained with other filter effects
addLightenFilter(el, i, attrs) {
const w = this.w
const { intensity } = attrs
el.unfilter(true)
let filter = new window.SVG.Filter()
el.filter((add) => {
const shadowAttr = w.config.chart.dropShadow
if (shadowAttr.enabled) {
filter = this.addShadow(add, i, shadowAttr)
} else {
filter = add
}
filter.componentTransfer({
rgb: { type: 'linear', slope: 1.5, intercept: intensity }
})
})
el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse')
this._scaleFilterSize(el.filterer.node)
}
// appends dropShadow to the filter object which can be chained with other filter effects
addDarkenFilter(el, i, attrs) {
const w = this.w
const { intensity } = attrs
el.unfilter(true)
let filter = new window.SVG.Filter()
el.filter((add) => {
const shadowAttr = w.config.chart.dropShadow
if (shadowAttr.enabled) {
filter = this.addShadow(add, i, shadowAttr)
} else {
filter = add
}
filter.componentTransfer({
rgb: { type: 'linear', slope: intensity }
})
})
el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse')
this._scaleFilterSize(el.filterer.node)
}
applyFilter(el, i, filter, intensity = 0.5) {
switch (filter) {
case 'none': {
this.addNormalFilter(el, i)
break
}
case 'lighten': {
this.addLightenFilter(el, i, {
intensity
})
break
}
case 'darken': {
this.addDarkenFilter(el, i, {
intensity
})
break
}
default:
// do nothing
break
}
}
// appends dropShadow to the filter object which can be chained with other filter effects
addShadow(add, i, attrs) {
const { blur, top, left, color, opacity } = attrs
let shadowBlur = add
.flood(Array.isArray(color) ? color[i] : color, opacity)
.composite(add.sourceAlpha, 'in')
.offset(left, top)
.gaussianBlur(blur)
.merge(add.source)
return add.blend(add.source, shadowBlur)
}
// directly adds dropShadow to the element and returns the same element.
// the only way it is different from the addShadow() function is that addShadow is chainable to other filters, while this function discards all filters and add dropShadow
dropShadow(el, attrs, i = 0) {
let { top, left, blur, color, opacity, noUserSpaceOnUse } = attrs
const w = this.w
el.unfilter(true)
if (Utils.isIE() && w.config.chart.type === 'radialBar') {
// in radialbar charts, dropshadow is clipping actual drawing in IE
return el
}
color = Array.isArray(color) ? color[i] : color
el.filter((add) => {
let shadowBlur = null
if (Utils.isSafari() || Utils.isFirefox() || Utils.isIE()) {
// safari/firefox/IE have some alternative way to use this filter
shadowBlur = add
.flood(color, opacity)
.composite(add.sourceAlpha, 'in')
.offset(left, top)
.gaussianBlur(blur)
} else {
shadowBlur = add
.flood(color, opacity)
.composite(add.sourceAlpha, 'in')
.offset(left, top)
.gaussianBlur(blur)
.merge(add.source)
}
add.blend(add.source, shadowBlur)
})
if (!noUserSpaceOnUse) {
el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse')
}
this._scaleFilterSize(el.filterer.node)
return el
}
setSelectionFilter(el, realIndex, dataPointIndex) {
const w = this.w
if (typeof w.globals.selectedDataPoints[realIndex] !== 'undefined') {
if (
w.globals.selectedDataPoints[realIndex].indexOf(dataPointIndex) > -1
) {
el.node.setAttribute('selected', true)
let activeFilter = w.config.states.active.filter
if (activeFilter !== 'none') {
this.applyFilter(el, realIndex, activeFilter.type, activeFilter.value)
}
}
}
}
_scaleFilterSize(el) {
const setAttributes = (attrs) => {
for (let key in attrs) {
if (attrs.hasOwnProperty(key)) {
el.setAttribute(key, attrs[key])
}
}
}
setAttributes({
width: '200%',
height: '200%',
x: '-50%',
y: '-50%'
})
}
}
export default Filters

View File

@@ -1,182 +0,0 @@
import DateTime from '../utils/DateTime'
import Utils from '../utils/Utils'
/**
* ApexCharts Formatter Class for setting value formatters for axes as well as tooltips.
*
* @module Formatters
**/
class Formatters {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.tooltipKeyFormat = 'dd MMM'
}
xLabelFormat(fn, val, timestamp, opts) {
let w = this.w
if (w.config.xaxis.type === 'datetime') {
if (w.config.xaxis.labels.formatter === undefined) {
// if user has not specified a custom formatter, use the default tooltip.x.format
if (w.config.tooltip.x.formatter === undefined) {
let datetimeObj = new DateTime(this.ctx)
return datetimeObj.formatDate(
datetimeObj.getDate(val),
w.config.tooltip.x.format
)
}
}
}
return fn(val, timestamp, opts)
}
defaultGeneralFormatter(val) {
if (Array.isArray(val)) {
return val.map((v) => {
return v
})
} else {
return val
}
}
defaultYFormatter(v, yaxe, i) {
let w = this.w
if (Utils.isNumber(v)) {
if (w.globals.yValueDecimal !== 0) {
v = v.toFixed(
yaxe.decimalsInFloat !== undefined
? yaxe.decimalsInFloat
: w.globals.yValueDecimal
)
} else if (w.globals.maxYArr[i] - w.globals.minYArr[i] < 5) {
v = v.toFixed(1)
} else {
v = v.toFixed(0)
}
}
return v
}
setLabelFormatters() {
let w = this.w
w.globals.xaxisTooltipFormatter = (val) => {
return this.defaultGeneralFormatter(val)
}
w.globals.ttKeyFormatter = (val) => {
return this.defaultGeneralFormatter(val)
}
w.globals.ttZFormatter = (val) => {
return val
}
w.globals.legendFormatter = (val) => {
return this.defaultGeneralFormatter(val)
}
// formatter function will always overwrite format property
if (w.config.xaxis.labels.formatter !== undefined) {
w.globals.xLabelFormatter = w.config.xaxis.labels.formatter
} else {
w.globals.xLabelFormatter = (val) => {
if (Utils.isNumber(val)) {
if (
!w.config.xaxis.convertedCatToNumeric &&
w.config.xaxis.type === 'numeric'
) {
if (Utils.isNumber(w.config.xaxis.decimalsInFloat)) {
return val.toFixed(w.config.xaxis.decimalsInFloat)
} else {
const diff = w.globals.maxX - w.globals.minX
if (diff > 0 && diff < 100) {
return val.toFixed(1)
}
return val.toFixed(0)
}
}
if (w.globals.isBarHorizontal) {
const range = w.globals.maxY - w.globals.minYArr
if (range < 4) {
return val.toFixed(1)
}
}
return val.toFixed(0)
}
return val
}
}
if (typeof w.config.tooltip.x.formatter === 'function') {
w.globals.ttKeyFormatter = w.config.tooltip.x.formatter
} else {
w.globals.ttKeyFormatter = w.globals.xLabelFormatter
}
if (typeof w.config.xaxis.tooltip.formatter === 'function') {
w.globals.xaxisTooltipFormatter = w.config.xaxis.tooltip.formatter
}
if (Array.isArray(w.config.tooltip.y)) {
w.globals.ttVal = w.config.tooltip.y
} else {
if (w.config.tooltip.y.formatter !== undefined) {
w.globals.ttVal = w.config.tooltip.y
}
}
if (w.config.tooltip.z.formatter !== undefined) {
w.globals.ttZFormatter = w.config.tooltip.z.formatter
}
// legend formatter - if user wants to append any global values of series to legend text
if (w.config.legend.formatter !== undefined) {
w.globals.legendFormatter = w.config.legend.formatter
}
// formatter function will always overwrite format property
w.config.yaxis.forEach((yaxe, i) => {
if (yaxe.labels.formatter !== undefined) {
w.globals.yLabelFormatters[i] = yaxe.labels.formatter
} else {
w.globals.yLabelFormatters[i] = (val) => {
if (!w.globals.xyCharts) return val
if (Array.isArray(val)) {
return val.map((v) => {
return this.defaultYFormatter(v, yaxe, i)
})
} else {
return this.defaultYFormatter(val, yaxe, i)
}
}
}
})
return w.globals
}
heatmapLabelFormatters() {
const w = this.w
if (w.config.chart.type === 'heatmap') {
w.globals.yAxisScale[0].result = w.globals.seriesNames.slice()
// get the longest string from the labels array and also apply label formatter to it
let longest = w.globals.seriesNames.reduce(
(a, b) => (a.length > b.length ? a : b),
0
)
w.globals.yAxisScale[0].niceMax = longest
w.globals.yAxisScale[0].niceMin = longest
}
}
}
export default Formatters

View File

@@ -1,842 +0,0 @@
import Animations from './Animations'
import Filters from './Filters'
import Utils from '../utils/Utils'
/**
* ApexCharts Graphics Class for all drawing operations.
*
* @module Graphics
**/
class Graphics {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
drawLine(
x1,
y1,
x2,
y2,
lineColor = '#a8a8a8',
dashArray = 0,
strokeWidth = null,
strokeLineCap = 'butt'
) {
let w = this.w
let line = w.globals.dom.Paper.line().attr({
x1,
y1,
x2,
y2,
stroke: lineColor,
'stroke-dasharray': dashArray,
'stroke-width': strokeWidth,
'stroke-linecap': strokeLineCap
})
return line
}
drawRect(
x1 = 0,
y1 = 0,
x2 = 0,
y2 = 0,
radius = 0,
color = '#fefefe',
opacity = 1,
strokeWidth = null,
strokeColor = null,
strokeDashArray = 0
) {
let w = this.w
let rect = w.globals.dom.Paper.rect()
rect.attr({
x: x1,
y: y1,
width: x2 > 0 ? x2 : 0,
height: y2 > 0 ? y2 : 0,
rx: radius,
ry: radius,
opacity,
'stroke-width': strokeWidth !== null ? strokeWidth : 0,
stroke: strokeColor !== null ? strokeColor : 'none',
'stroke-dasharray': strokeDashArray
})
// fix apexcharts.js#1410
rect.node.setAttribute('fill', color)
return rect
}
drawPolygon(
polygonString,
stroke = '#e1e1e1',
strokeWidth = 1,
fill = 'none'
) {
const w = this.w
const polygon = w.globals.dom.Paper.polygon(polygonString).attr({
fill,
stroke,
'stroke-width': strokeWidth
})
return polygon
}
drawCircle(radius, attrs = null) {
const w = this.w
if (radius < 0) radius = 0
const c = w.globals.dom.Paper.circle(radius * 2)
if (attrs !== null) {
c.attr(attrs)
}
return c
}
drawPath({
d = '',
stroke = '#a8a8a8',
strokeWidth = 1,
fill,
fillOpacity = 1,
strokeOpacity = 1,
classes,
strokeLinecap = null,
strokeDashArray = 0
}) {
let w = this.w
if (strokeLinecap === null) {
strokeLinecap = w.config.stroke.lineCap
}
if (d.indexOf('undefined') > -1 || d.indexOf('NaN') > -1) {
d = `M 0 ${w.globals.gridHeight}`
}
let p = w.globals.dom.Paper.path(d).attr({
fill,
'fill-opacity': fillOpacity,
stroke,
'stroke-opacity': strokeOpacity,
'stroke-linecap': strokeLinecap,
'stroke-width': strokeWidth,
'stroke-dasharray': strokeDashArray,
class: classes
})
return p
}
group(attrs = null) {
const w = this.w
const g = w.globals.dom.Paper.group()
if (attrs !== null) {
g.attr(attrs)
}
return g
}
move(x, y) {
let move = ['M', x, y].join(' ')
return move
}
line(x, y, hORv = null) {
let line = null
if (hORv === null) {
line = ['L', x, y].join(' ')
} else if (hORv === 'H') {
line = ['H', x].join(' ')
} else if (hORv === 'V') {
line = ['V', y].join(' ')
}
return line
}
curve(x1, y1, x2, y2, x, y) {
let curve = ['C', x1, y1, x2, y2, x, y].join(' ')
return curve
}
quadraticCurve(x1, y1, x, y) {
let curve = ['Q', x1, y1, x, y].join(' ')
return curve
}
arc(rx, ry, axisRotation, largeArcFlag, sweepFlag, x, y, relative = false) {
let coord = 'A'
if (relative) coord = 'a'
let arc = [coord, rx, ry, axisRotation, largeArcFlag, sweepFlag, x, y].join(
' '
)
return arc
}
/**
* @memberof Graphics
* @param {object}
* i = series's index
* realIndex = realIndex is series's actual index when it was drawn time. After several redraws, the iterating "i" may change in loops, but realIndex doesn't
* pathFrom = existing pathFrom to animateTo
* pathTo = new Path to which d attr will be animated from pathFrom to pathTo
* stroke = line Color
* strokeWidth = width of path Line
* fill = it can be gradient, single color, pattern or image
* animationDelay = how much to delay when starting animation (in milliseconds)
* dataChangeSpeed = for dynamic animations, when data changes
* className = class attribute to add
* @return {object} svg.js path object
**/
renderPaths({
j,
realIndex,
pathFrom,
pathTo,
stroke,
strokeWidth,
strokeLinecap,
fill,
animationDelay,
initialSpeed,
dataChangeSpeed,
className,
shouldClipToGrid = true,
bindEventsOnPaths = true,
drawShadow = true
}) {
let w = this.w
const filters = new Filters(this.ctx)
const anim = new Animations(this.ctx)
let initialAnim = this.w.config.chart.animations.enabled
let dynamicAnim =
initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled
let d
let shouldAnimate = !!(
(initialAnim && !w.globals.resized) ||
(dynamicAnim && w.globals.dataChanged && w.globals.shouldAnimate)
)
if (shouldAnimate) {
d = pathFrom
} else {
d = pathTo
w.globals.animationEnded = true
}
let strokeDashArrayOpt = w.config.stroke.dashArray
let strokeDashArray = 0
if (Array.isArray(strokeDashArrayOpt)) {
strokeDashArray = strokeDashArrayOpt[realIndex]
} else {
strokeDashArray = w.config.stroke.dashArray
}
let el = this.drawPath({
d,
stroke,
strokeWidth,
fill,
fillOpacity: 1,
classes: className,
strokeLinecap,
strokeDashArray
})
el.attr('index', realIndex)
if (shouldClipToGrid) {
el.attr({
'clip-path': `url(#gridRectMask${w.globals.cuid})`
})
}
// const defaultFilter = el.filterer
if (w.config.states.normal.filter.type !== 'none') {
filters.getDefaultFilter(el, realIndex)
} else {
if (w.config.chart.dropShadow.enabled && drawShadow) {
if (
!w.config.chart.dropShadow.enabledOnSeries ||
(w.config.chart.dropShadow.enabledOnSeries &&
w.config.chart.dropShadow.enabledOnSeries.indexOf(realIndex) !== -1)
) {
const shadow = w.config.chart.dropShadow
filters.dropShadow(el, shadow, realIndex)
}
}
}
if (bindEventsOnPaths) {
el.node.addEventListener('mouseenter', this.pathMouseEnter.bind(this, el))
el.node.addEventListener('mouseleave', this.pathMouseLeave.bind(this, el))
el.node.addEventListener('mousedown', this.pathMouseDown.bind(this, el))
}
el.attr({
pathTo,
pathFrom
})
const defaultAnimateOpts = {
el,
j,
realIndex,
pathFrom,
pathTo,
fill,
strokeWidth,
delay: animationDelay
}
if (initialAnim && !w.globals.resized && !w.globals.dataChanged) {
anim.animatePathsGradually({
...defaultAnimateOpts,
speed: initialSpeed
})
} else {
if (w.globals.resized || !w.globals.dataChanged) {
anim.showDelayedElements()
}
}
if (w.globals.dataChanged && dynamicAnim && shouldAnimate) {
anim.animatePathsGradually({
...defaultAnimateOpts,
speed: dataChangeSpeed
})
}
return el
}
drawPattern(
style,
width,
height,
stroke = '#a8a8a8',
strokeWidth = 0,
opacity = 1
) {
let w = this.w
let p = w.globals.dom.Paper.pattern(width, height, (add) => {
if (style === 'horizontalLines') {
add
.line(0, 0, height, 0)
.stroke({ color: stroke, width: strokeWidth + 1 })
} else if (style === 'verticalLines') {
add
.line(0, 0, 0, width)
.stroke({ color: stroke, width: strokeWidth + 1 })
} else if (style === 'slantedLines') {
add
.line(0, 0, width, height)
.stroke({ color: stroke, width: strokeWidth })
} else if (style === 'squares') {
add
.rect(width, height)
.fill('none')
.stroke({ color: stroke, width: strokeWidth })
} else if (style === 'circles') {
add
.circle(width)
.fill('none')
.stroke({ color: stroke, width: strokeWidth })
}
})
return p
}
drawGradient(
style,
gfrom,
gto,
opacityFrom,
opacityTo,
size = null,
stops = null,
colorStops = null,
i = 0
) {
let w = this.w
let g
if (gfrom.length < 9 && gfrom.indexOf('#') === 0) {
// if the hex contains alpha and is of 9 digit, skip the opacity
gfrom = Utils.hexToRgba(gfrom, opacityFrom)
}
if (gto.length < 9 && gto.indexOf('#') === 0) {
gto = Utils.hexToRgba(gto, opacityTo)
}
let stop1 = 0
let stop2 = 1
let stop3 = 1
let stop4 = null
if (stops !== null) {
stop1 = typeof stops[0] !== 'undefined' ? stops[0] / 100 : 0
stop2 = typeof stops[1] !== 'undefined' ? stops[1] / 100 : 1
stop3 = typeof stops[2] !== 'undefined' ? stops[2] / 100 : 1
stop4 = typeof stops[3] !== 'undefined' ? stops[3] / 100 : null
}
let radial = !!(
w.config.chart.type === 'donut' ||
w.config.chart.type === 'pie' ||
w.config.chart.type === 'polarArea' ||
w.config.chart.type === 'bubble'
)
if (colorStops === null || colorStops.length === 0) {
g = w.globals.dom.Paper.gradient(radial ? 'radial' : 'linear', (stop) => {
stop.at(stop1, gfrom, opacityFrom)
stop.at(stop2, gto, opacityTo)
stop.at(stop3, gto, opacityTo)
if (stop4 !== null) {
stop.at(stop4, gfrom, opacityFrom)
}
})
} else {
g = w.globals.dom.Paper.gradient(radial ? 'radial' : 'linear', (stop) => {
let gradientStops = Array.isArray(colorStops[i])
? colorStops[i]
: colorStops
gradientStops.forEach((s) => {
stop.at(s.offset / 100, s.color, s.opacity)
})
})
}
if (!radial) {
if (style === 'vertical') {
g.from(0, 0).to(0, 1)
} else if (style === 'diagonal') {
g.from(0, 0).to(1, 1)
} else if (style === 'horizontal') {
g.from(0, 1).to(1, 1)
} else if (style === 'diagonal2') {
g.from(1, 0).to(0, 1)
}
} else {
let offx = w.globals.gridWidth / 2
let offy = w.globals.gridHeight / 2
if (w.config.chart.type !== 'bubble') {
g.attr({
gradientUnits: 'userSpaceOnUse',
cx: offx,
cy: offy,
r: size
})
} else {
g.attr({
cx: 0.5,
cy: 0.5,
r: 0.8,
fx: 0.2,
fy: 0.2
})
}
}
return g
}
getTextBasedOnMaxWidth({ text, maxWidth, fontSize, fontFamily }) {
const tRects = this.getTextRects(text, fontSize, fontFamily)
const wordWidth = tRects.width / text.length
const wordsBasedOnWidth = Math.floor(maxWidth / wordWidth)
if (maxWidth < tRects.width) {
return text.slice(0, wordsBasedOnWidth - 3) + '...'
}
return text
}
drawText({
x,
y,
text,
textAnchor,
fontSize,
fontFamily,
fontWeight,
foreColor,
opacity,
maxWidth,
cssClass = '',
isPlainText = true
}) {
let w = this.w
if (typeof text === 'undefined') text = ''
let truncatedText = text
if (!textAnchor) {
textAnchor = 'start'
}
if (!foreColor || !foreColor.length) {
foreColor = w.config.chart.foreColor
}
fontFamily = fontFamily || w.config.chart.fontFamily
fontSize = fontSize || '11px'
fontWeight = fontWeight || 'regular'
const commonProps = {
maxWidth,
fontSize,
fontFamily
}
let elText
if (Array.isArray(text)) {
elText = w.globals.dom.Paper.text((add) => {
for (let i = 0; i < text.length; i++) {
if (maxWidth) {
truncatedText = this.getTextBasedOnMaxWidth({
text: text[i],
...commonProps
})
}
i === 0
? add.tspan(truncatedText)
: add.tspan(truncatedText).newLine()
}
})
} else {
if (maxWidth) {
truncatedText = this.getTextBasedOnMaxWidth({
text,
...commonProps
})
}
elText = isPlainText
? w.globals.dom.Paper.plain(text)
: w.globals.dom.Paper.text((add) => add.tspan(truncatedText))
}
elText.attr({
x,
y,
'text-anchor': textAnchor,
'dominant-baseline': 'auto',
'font-size': fontSize,
'font-family': fontFamily,
'font-weight': fontWeight,
fill: foreColor,
class: 'apexcharts-text ' + cssClass
})
elText.node.style.fontFamily = fontFamily
elText.node.style.opacity = opacity
return elText
}
drawMarker(x, y, opts) {
x = x || 0
let size = opts.pSize || 0
let elPoint = null
if (opts.shape === 'square' || opts.shape === 'rect') {
let radius = opts.pRadius === undefined ? size / 2 : opts.pRadius
if (y === null || !size) {
size = 0
radius = 0
}
let nSize = size * 1.2 + radius
let p = this.drawRect(nSize, nSize, nSize, nSize, radius)
p.attr({
x: x - nSize / 2,
y: y - nSize / 2,
cx: x,
cy: y,
class: opts.class ? opts.class : '',
fill: opts.pointFillColor,
'fill-opacity': opts.pointFillOpacity ? opts.pointFillOpacity : 1,
stroke: opts.pointStrokeColor,
'stroke-width': opts.pointStrokeWidth ? opts.pointStrokeWidth : 0,
'stroke-opacity': opts.pointStrokeOpacity ? opts.pointStrokeOpacity : 1
})
elPoint = p
} else if (opts.shape === 'circle' || !opts.shape) {
if (!Utils.isNumber(y)) {
size = 0
y = 0
}
// let nSize = size - opts.pRadius / 2 < 0 ? 0 : size - opts.pRadius / 2
elPoint = this.drawCircle(size, {
cx: x,
cy: y,
class: opts.class ? opts.class : '',
stroke: opts.pointStrokeColor,
fill: opts.pointFillColor,
'fill-opacity': opts.pointFillOpacity ? opts.pointFillOpacity : 1,
'stroke-width': opts.pointStrokeWidth ? opts.pointStrokeWidth : 0,
'stroke-opacity': opts.pointStrokeOpacity ? opts.pointStrokeOpacity : 1
})
}
return elPoint
}
pathMouseEnter(path, e) {
let w = this.w
const filters = new Filters(this.ctx)
const i = parseInt(path.node.getAttribute('index'), 10)
const j = parseInt(path.node.getAttribute('j'), 10)
if (typeof w.config.chart.events.dataPointMouseEnter === 'function') {
w.config.chart.events.dataPointMouseEnter(e, this.ctx, {
seriesIndex: i,
dataPointIndex: j,
w
})
}
this.ctx.events.fireEvent('dataPointMouseEnter', [
e,
this.ctx,
{ seriesIndex: i, dataPointIndex: j, w }
])
if (w.config.states.active.filter.type !== 'none') {
if (path.node.getAttribute('selected') === 'true') {
return
}
}
if (w.config.states.hover.filter.type !== 'none') {
if (!w.globals.isTouchDevice) {
let hoverFilter = w.config.states.hover.filter
filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
}
}
}
pathMouseLeave(path, e) {
let w = this.w
const filters = new Filters(this.ctx)
const i = parseInt(path.node.getAttribute('index'), 10)
const j = parseInt(path.node.getAttribute('j'), 10)
if (typeof w.config.chart.events.dataPointMouseLeave === 'function') {
w.config.chart.events.dataPointMouseLeave(e, this.ctx, {
seriesIndex: i,
dataPointIndex: j,
w
})
}
this.ctx.events.fireEvent('dataPointMouseLeave', [
e,
this.ctx,
{ seriesIndex: i, dataPointIndex: j, w }
])
if (w.config.states.active.filter.type !== 'none') {
if (path.node.getAttribute('selected') === 'true') {
return
}
}
if (w.config.states.hover.filter.type !== 'none') {
filters.getDefaultFilter(path, i)
}
}
pathMouseDown(path, e) {
let w = this.w
const filters = new Filters(this.ctx)
const i = parseInt(path.node.getAttribute('index'), 10)
const j = parseInt(path.node.getAttribute('j'), 10)
let selected = 'false'
if (path.node.getAttribute('selected') === 'true') {
path.node.setAttribute('selected', 'false')
if (w.globals.selectedDataPoints[i].indexOf(j) > -1) {
let index = w.globals.selectedDataPoints[i].indexOf(j)
w.globals.selectedDataPoints[i].splice(index, 1)
}
} else {
if (
!w.config.states.active.allowMultipleDataPointsSelection &&
w.globals.selectedDataPoints.length > 0
) {
w.globals.selectedDataPoints = []
const elPaths = w.globals.dom.Paper.select('.apexcharts-series path')
.members
const elCircles = w.globals.dom.Paper.select(
'.apexcharts-series circle, .apexcharts-series rect'
).members
const deSelect = (els) => {
Array.prototype.forEach.call(els, (el) => {
el.node.setAttribute('selected', 'false')
filters.getDefaultFilter(el, i)
})
}
deSelect(elPaths)
deSelect(elCircles)
}
path.node.setAttribute('selected', 'true')
selected = 'true'
if (typeof w.globals.selectedDataPoints[i] === 'undefined') {
w.globals.selectedDataPoints[i] = []
}
w.globals.selectedDataPoints[i].push(j)
}
if (selected === 'true') {
let activeFilter = w.config.states.active.filter
if (activeFilter !== 'none') {
filters.applyFilter(path, i, activeFilter.type, activeFilter.value)
} else {
// Reapply the hover filter in case it was removed by `deselect`when there is no active filter and it is not a touch device
if (w.config.states.hover.filter !== 'none') {
if (!w.globals.isTouchDevice) {
var hoverFilter = w.config.states.hover.filter
filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
}
}
}
} else {
// If the item was deselected, apply hover state filter if it is not a touch device
if (w.config.states.active.filter.type !== 'none') {
if (
w.config.states.hover.filter.type !== 'none' &&
!w.globals.isTouchDevice
) {
var hoverFilter = w.config.states.hover.filter
filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
} else {
filters.getDefaultFilter(path, i)
}
}
}
if (typeof w.config.chart.events.dataPointSelection === 'function') {
w.config.chart.events.dataPointSelection(e, this.ctx, {
selectedDataPoints: w.globals.selectedDataPoints,
seriesIndex: i,
dataPointIndex: j,
w
})
}
if (e) {
this.ctx.events.fireEvent('dataPointSelection', [
e,
this.ctx,
{
selectedDataPoints: w.globals.selectedDataPoints,
seriesIndex: i,
dataPointIndex: j,
w
}
])
}
}
rotateAroundCenter(el) {
let coord = {}
if (el && typeof el.getBBox === 'function') {
coord = el.getBBox()
}
let x = coord.x + coord.width / 2
let y = coord.y + coord.height / 2
return {
x,
y
}
}
static setAttrs(el, attrs) {
for (let key in attrs) {
if (attrs.hasOwnProperty(key)) {
el.setAttribute(key, attrs[key])
}
}
}
getTextRects(text, fontSize, fontFamily, transform, useBBox = true) {
let w = this.w
let virtualText = this.drawText({
x: -200,
y: -200,
text,
textAnchor: 'start',
fontSize,
fontFamily,
foreColor: '#fff',
opacity: 0
})
if (transform) {
virtualText.attr('transform', transform)
}
w.globals.dom.Paper.add(virtualText)
let rect = virtualText.bbox()
if (!useBBox) {
rect = virtualText.node.getBoundingClientRect()
}
virtualText.remove()
return {
width: rect.width,
height: rect.height
}
}
/**
* append ... to long text
* http://stackoverflow.com/questions/9241315/trimming-text-to-a-given-pixel-width-in-svg
* @memberof Graphics
**/
placeTextWithEllipsis(textObj, textString, width) {
if (typeof textObj.getComputedTextLength !== 'function') return
textObj.textContent = textString
if (textString.length > 0) {
// ellipsis is needed
if (textObj.getComputedTextLength() >= width / 1.1) {
for (let x = textString.length - 3; x > 0; x -= 3) {
if (textObj.getSubStringLength(0, x) <= width / 1.1) {
textObj.textContent = textString.substring(0, x) + '...'
return
}
}
textObj.textContent = '.' // can't place at all
}
}
}
}
export default Graphics

View File

@@ -1,245 +0,0 @@
import Filters from './Filters'
import Graphics from './Graphics'
import Utils from '../utils/Utils'
/**
* ApexCharts Markers Class for drawing points on y values in axes charts.
*
* @module Markers
**/
export default class Markers {
constructor(ctx, opts) {
this.ctx = ctx
this.w = ctx.w
}
setGlobalMarkerSize() {
const w = this.w
w.globals.markers.size = Array.isArray(w.config.markers.size)
? w.config.markers.size
: [w.config.markers.size]
if (w.globals.markers.size.length > 0) {
if (w.globals.markers.size.length < w.globals.series.length + 1) {
for (let i = 0; i <= w.globals.series.length; i++) {
if (typeof w.globals.markers.size[i] === 'undefined') {
w.globals.markers.size.push(w.globals.markers.size[0])
}
}
}
} else {
w.globals.markers.size = w.config.series.map((s) => w.config.markers.size)
}
}
plotChartMarkers(pointsPos, seriesIndex, j, pSize, alwaysDrawMarker = false) {
let w = this.w
let i = seriesIndex
let p = pointsPos
let elPointsWrap = null
let graphics = new Graphics(this.ctx)
let point
const hasDiscreteMarkers =
w.config.markers.discrete && w.config.markers.discrete.length
if (
w.globals.markers.size[seriesIndex] > 0 ||
alwaysDrawMarker ||
hasDiscreteMarkers
) {
elPointsWrap = graphics.group({
class:
alwaysDrawMarker || hasDiscreteMarkers
? ''
: 'apexcharts-series-markers'
})
elPointsWrap.attr(
'clip-path',
`url(#gridRectMarkerMask${w.globals.cuid})`
)
}
if (Array.isArray(p.x)) {
for (let q = 0; q < p.x.length; q++) {
let dataPointIndex = j
// a small hack as we have 2 points for the first val to connect it
if (j === 1 && q === 0) dataPointIndex = 0
if (j === 1 && q === 1) dataPointIndex = 1
let PointClasses = 'apexcharts-marker'
if (
(w.config.chart.type === 'line' || w.config.chart.type === 'area') &&
!w.globals.comboCharts &&
!w.config.tooltip.intersect
) {
PointClasses += ' no-pointer-events'
}
const shouldMarkerDraw = Array.isArray(w.config.markers.size)
? w.globals.markers.size[seriesIndex] > 0
: w.config.markers.size > 0
if (shouldMarkerDraw || alwaysDrawMarker || hasDiscreteMarkers) {
if (Utils.isNumber(p.y[q])) {
PointClasses += ` w${Utils.randomId()}`
} else {
PointClasses = 'apexcharts-nullpoint'
}
let opts = this.getMarkerConfig({
cssClass: PointClasses,
seriesIndex,
dataPointIndex
})
if (w.config.series[i].data[dataPointIndex]) {
if (w.config.series[i].data[dataPointIndex].fillColor) {
opts.pointFillColor =
w.config.series[i].data[dataPointIndex].fillColor
}
if (w.config.series[i].data[dataPointIndex].strokeColor) {
opts.pointStrokeColor =
w.config.series[i].data[dataPointIndex].strokeColor
}
}
if (pSize) {
opts.pSize = pSize
}
point = graphics.drawMarker(p.x[q], p.y[q], opts)
point.attr('rel', dataPointIndex)
point.attr('j', dataPointIndex)
point.attr('index', seriesIndex)
point.node.setAttribute('default-marker-size', opts.pSize)
const filters = new Filters(this.ctx)
filters.setSelectionFilter(point, seriesIndex, dataPointIndex)
this.addEvents(point)
if (elPointsWrap) {
elPointsWrap.add(point)
}
} else {
// dynamic array creation - multidimensional
if (typeof w.globals.pointsArray[seriesIndex] === 'undefined')
w.globals.pointsArray[seriesIndex] = []
w.globals.pointsArray[seriesIndex].push([p.x[q], p.y[q]])
}
}
}
return elPointsWrap
}
getMarkerConfig({
cssClass,
seriesIndex,
dataPointIndex = null,
finishRadius = null
}) {
const w = this.w
let pStyle = this.getMarkerStyle(seriesIndex)
let pSize = w.globals.markers.size[seriesIndex]
const m = w.config.markers
// discrete markers is an option where user can specify a particular marker with different shape, size and color
if (dataPointIndex !== null && m.discrete.length) {
m.discrete.map((marker) => {
if (
marker.seriesIndex === seriesIndex &&
marker.dataPointIndex === dataPointIndex
) {
pStyle.pointStrokeColor = marker.strokeColor
pStyle.pointFillColor = marker.fillColor
pSize = marker.size
pStyle.pointShape = marker.shape
}
})
}
return {
pSize: finishRadius === null ? pSize : finishRadius,
pRadius: m.radius,
width: Array.isArray(m.width) ? m.width[seriesIndex] : m.width,
height: Array.isArray(m.height) ? m.height[seriesIndex] : m.height,
pointStrokeWidth: Array.isArray(m.strokeWidth)
? m.strokeWidth[seriesIndex]
: m.strokeWidth,
pointStrokeColor: pStyle.pointStrokeColor,
pointFillColor: pStyle.pointFillColor,
shape:
pStyle.pointShape ||
(Array.isArray(m.shape) ? m.shape[seriesIndex] : m.shape),
class: cssClass,
pointStrokeOpacity: Array.isArray(m.strokeOpacity)
? m.strokeOpacity[seriesIndex]
: m.strokeOpacity,
pointStrokeDashArray: Array.isArray(m.strokeDashArray)
? m.strokeDashArray[seriesIndex]
: m.strokeDashArray,
pointFillOpacity: Array.isArray(m.fillOpacity)
? m.fillOpacity[seriesIndex]
: m.fillOpacity,
seriesIndex
}
}
addEvents(circle) {
const w = this.w
const graphics = new Graphics(this.ctx)
circle.node.addEventListener(
'mouseenter',
graphics.pathMouseEnter.bind(this.ctx, circle)
)
circle.node.addEventListener(
'mouseleave',
graphics.pathMouseLeave.bind(this.ctx, circle)
)
circle.node.addEventListener(
'mousedown',
graphics.pathMouseDown.bind(this.ctx, circle)
)
circle.node.addEventListener('click', w.config.markers.onClick)
circle.node.addEventListener('dblclick', w.config.markers.onDblClick)
circle.node.addEventListener(
'touchstart',
graphics.pathMouseDown.bind(this.ctx, circle),
{ passive: true }
)
}
getMarkerStyle(seriesIndex) {
let w = this.w
let colors = w.globals.markers.colors
let strokeColors =
w.config.markers.strokeColor || w.config.markers.strokeColors
let pointStrokeColor = Array.isArray(strokeColors)
? strokeColors[seriesIndex]
: strokeColors
let pointFillColor = Array.isArray(colors) ? colors[seriesIndex] : colors
return {
pointStrokeColor,
pointFillColor
}
}
}

View File

@@ -1,548 +0,0 @@
import Utils from '../utils/Utils'
import DateTime from '../utils/DateTime'
import Scales from './Scales'
/**
* Range is used to generates values between min and max.
*
* @module Range
**/
class Range {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.scales = new Scales(ctx)
}
init() {
this.setYRange()
this.setXRange()
this.setZRange()
}
getMinYMaxY(
startingIndex,
lowestY = Number.MAX_VALUE,
highestY = -Number.MAX_VALUE,
len = null
) {
const cnf = this.w.config
const gl = this.w.globals
let maxY = -Number.MAX_VALUE
let minY = Number.MIN_VALUE
if (len === null) {
len = startingIndex + 1
}
const series = gl.series
let seriesMin = series
let seriesMax = series
if (cnf.chart.type === 'candlestick') {
seriesMin = gl.seriesCandleL
seriesMax = gl.seriesCandleH
} else if (cnf.chart.type === 'boxPlot') {
seriesMin = gl.seriesCandleO
seriesMax = gl.seriesCandleC
} else if (gl.isRangeData) {
seriesMin = gl.seriesRangeStart
seriesMax = gl.seriesRangeEnd
}
for (let i = startingIndex; i < len; i++) {
gl.dataPoints = Math.max(gl.dataPoints, series[i].length)
if (gl.categoryLabels.length) {
gl.dataPoints = gl.categoryLabels.filter(
(label) => typeof label !== 'undefined'
).length
}
for (let j = 0; j < gl.series[i].length; j++) {
let val = series[i][j]
if (val !== null && Utils.isNumber(val)) {
if (typeof seriesMax[i][j] !== 'undefined') {
maxY = Math.max(maxY, seriesMax[i][j])
lowestY = Math.min(lowestY, seriesMax[i][j])
}
if (typeof seriesMin[i][j] !== 'undefined') {
lowestY = Math.min(lowestY, seriesMin[i][j])
highestY = Math.max(highestY, seriesMin[i][j])
}
if (
this.w.config.chart.type === 'candlestick' ||
this.w.config.chart.type === 'boxPlot'
) {
if (typeof gl.seriesCandleC[i][j] !== 'undefined') {
maxY = Math.max(maxY, gl.seriesCandleO[i][j])
maxY = Math.max(maxY, gl.seriesCandleH[i][j])
maxY = Math.max(maxY, gl.seriesCandleL[i][j])
maxY = Math.max(maxY, gl.seriesCandleC[i][j])
if (this.w.config.chart.type === 'boxPlot') {
maxY = Math.max(maxY, gl.seriesCandleM[i][j])
}
}
// there is a combo chart and the specified series in not either candlestick or boxplot, find the max there
if (
cnf.series[i].type &&
(cnf.series[i].type !== 'candlestick' ||
cnf.series[i].type !== 'boxPlot')
) {
maxY = Math.max(maxY, gl.series[i][j])
lowestY = Math.min(lowestY, gl.series[i][j])
}
highestY = maxY
}
if (
gl.seriesGoals[i] &&
gl.seriesGoals[i][j] &&
Array.isArray(gl.seriesGoals[i][j])
) {
gl.seriesGoals[i][j].forEach((g) => {
if (minY !== Number.MIN_VALUE) {
minY = Math.min(minY, g.value)
lowestY = minY
}
maxY = Math.max(maxY, g.value)
highestY = maxY
})
}
if (Utils.isFloat(val)) {
val = Utils.noExponents(val)
gl.yValueDecimal = Math.max(
gl.yValueDecimal,
val.toString().split('.')[1].length
)
}
if (minY > seriesMin[i][j] && seriesMin[i][j] < 0) {
minY = seriesMin[i][j]
}
} else {
gl.hasNullValues = true
}
}
}
if (
cnf.chart.type === 'rangeBar' &&
gl.seriesRangeStart.length &&
gl.isBarHorizontal
) {
minY = lowestY
}
if (cnf.chart.type === 'bar') {
if (minY < 0 && maxY < 0) {
// all negative values in a bar chart, hence make the max to 0
maxY = 0
}
if (minY === Number.MIN_VALUE) {
minY = 0
}
}
return {
minY,
maxY,
lowestY,
highestY
}
}
setYRange() {
let gl = this.w.globals
let cnf = this.w.config
gl.maxY = -Number.MAX_VALUE
gl.minY = Number.MIN_VALUE
let lowestYInAllSeries = Number.MAX_VALUE
if (gl.isMultipleYAxis) {
// we need to get minY and maxY for multiple y axis
for (let i = 0; i < gl.series.length; i++) {
const minYMaxYArr = this.getMinYMaxY(i, lowestYInAllSeries, null, i + 1)
gl.minYArr.push(minYMaxYArr.minY)
gl.maxYArr.push(minYMaxYArr.maxY)
lowestYInAllSeries = minYMaxYArr.lowestY
}
}
// and then, get the minY and maxY from all series
const minYMaxY = this.getMinYMaxY(
0,
lowestYInAllSeries,
null,
gl.series.length
)
gl.minY = minYMaxY.minY
gl.maxY = minYMaxY.maxY
lowestYInAllSeries = minYMaxY.lowestY
if (cnf.chart.stacked) {
this._setStackedMinMax()
}
// if the numbers are too big, reduce the range
// for eg, if number is between 100000-110000, putting 0 as the lowest value is not so good idea. So change the gl.minY for line/area/candlesticks/boxPlot
if (
cnf.chart.type === 'line' ||
cnf.chart.type === 'area' ||
cnf.chart.type === 'candlestick' ||
cnf.chart.type === 'boxPlot' ||
(cnf.chart.type === 'rangeBar' && !gl.isBarHorizontal)
) {
if (
gl.minY === Number.MIN_VALUE &&
lowestYInAllSeries !== -Number.MAX_VALUE &&
lowestYInAllSeries !== gl.maxY // single value possibility
) {
let diff = gl.maxY - lowestYInAllSeries
if (
(lowestYInAllSeries >= 0 && lowestYInAllSeries <= 10) ||
cnf.yaxis[0].min !== undefined ||
cnf.yaxis[0].max !== undefined
) {
// if minY is already 0/low value, we don't want to go negatives here - so this check is essential.
diff = 0
}
gl.minY = lowestYInAllSeries - (diff * 5) / 100
/* fix https://github.com/apexcharts/apexcharts.js/issues/614 */
/* fix https://github.com/apexcharts/apexcharts.js/issues/968 */
if (lowestYInAllSeries > 0 && gl.minY < 0) {
gl.minY = 0
}
/* fix https://github.com/apexcharts/apexcharts.js/issues/426 */
gl.maxY = gl.maxY + (diff * 5) / 100
}
}
cnf.yaxis.forEach((yaxe, index) => {
// override all min/max values by user defined values (y axis)
if (yaxe.max !== undefined) {
if (typeof yaxe.max === 'number') {
gl.maxYArr[index] = yaxe.max
} else if (typeof yaxe.max === 'function') {
// fixes apexcharts.js/issues/2098
gl.maxYArr[index] = yaxe.max(
gl.isMultipleYAxis ? gl.maxYArr[index] : gl.maxY
)
}
// gl.maxY is for single y-axis chart, it will be ignored in multi-yaxis
gl.maxY = gl.maxYArr[index]
}
if (yaxe.min !== undefined) {
if (typeof yaxe.min === 'number') {
gl.minYArr[index] = yaxe.min
} else if (typeof yaxe.min === 'function') {
// fixes apexcharts.js/issues/2098
gl.minYArr[index] = yaxe.min(
gl.isMultipleYAxis
? gl.minYArr[index] === Number.MIN_VALUE
? 0
: gl.minYArr[index]
: gl.minY
)
}
// gl.minY is for single y-axis chart, it will be ignored in multi-yaxis
gl.minY = gl.minYArr[index]
}
})
// for horizontal bar charts, we need to check xaxis min/max as user may have specified there
if (gl.isBarHorizontal) {
const minmax = ['min', 'max']
minmax.forEach((m) => {
if (cnf.xaxis[m] !== undefined && typeof cnf.xaxis[m] === 'number') {
m === 'min' ? (gl.minY = cnf.xaxis[m]) : (gl.maxY = cnf.xaxis[m])
}
})
}
// for multi y-axis we need different scales for each
if (gl.isMultipleYAxis) {
this.scales.setMultipleYScales()
gl.minY = lowestYInAllSeries
gl.yAxisScale.forEach((scale, i) => {
gl.minYArr[i] = scale.niceMin
gl.maxYArr[i] = scale.niceMax
})
} else {
this.scales.setYScaleForIndex(0, gl.minY, gl.maxY)
gl.minY = gl.yAxisScale[0].niceMin
gl.maxY = gl.yAxisScale[0].niceMax
gl.minYArr[0] = gl.yAxisScale[0].niceMin
gl.maxYArr[0] = gl.yAxisScale[0].niceMax
}
return {
minY: gl.minY,
maxY: gl.maxY,
minYArr: gl.minYArr,
maxYArr: gl.maxYArr,
yAxisScale: gl.yAxisScale
}
}
setXRange() {
let gl = this.w.globals
let cnf = this.w.config
const isXNumeric =
cnf.xaxis.type === 'numeric' ||
cnf.xaxis.type === 'datetime' ||
(cnf.xaxis.type === 'category' && !gl.noLabelsProvided) ||
gl.noLabelsProvided ||
gl.isXNumeric
const getInitialMinXMaxX = () => {
for (let i = 0; i < gl.series.length; i++) {
if (gl.labels[i]) {
for (let j = 0; j < gl.labels[i].length; j++) {
if (gl.labels[i][j] !== null && Utils.isNumber(gl.labels[i][j])) {
gl.maxX = Math.max(gl.maxX, gl.labels[i][j])
gl.initialMaxX = Math.max(gl.maxX, gl.labels[i][j])
gl.minX = Math.min(gl.minX, gl.labels[i][j])
gl.initialMinX = Math.min(gl.minX, gl.labels[i][j])
}
}
}
}
}
// minX maxX starts here
if (gl.isXNumeric) {
getInitialMinXMaxX()
}
if (gl.noLabelsProvided) {
if (cnf.xaxis.categories.length === 0) {
gl.maxX = gl.labels[gl.labels.length - 1]
gl.initialMaxX = gl.labels[gl.labels.length - 1]
gl.minX = 1
gl.initialMinX = 1
}
}
if (gl.isXNumeric || gl.noLabelsProvided || gl.dataFormatXNumeric) {
let ticks
if (cnf.xaxis.tickAmount === undefined) {
ticks = Math.round(gl.svgWidth / 150)
// no labels provided and total number of dataPoints is less than 30
if (cnf.xaxis.type === 'numeric' && gl.dataPoints < 30) {
ticks = gl.dataPoints - 1
}
// this check is for when ticks exceeds total datapoints and that would result in duplicate labels
if (ticks > gl.dataPoints && gl.dataPoints !== 0) {
ticks = gl.dataPoints - 1
}
} else if (cnf.xaxis.tickAmount === 'dataPoints') {
if (gl.series.length > 1) {
ticks = gl.series[gl.maxValsInArrayIndex].length - 1
}
if (gl.isXNumeric) {
ticks = gl.maxX - gl.minX - 1
}
} else {
ticks = cnf.xaxis.tickAmount
}
gl.xTickAmount = ticks
// override all min/max values by user defined values (x axis)
if (cnf.xaxis.max !== undefined && typeof cnf.xaxis.max === 'number') {
gl.maxX = cnf.xaxis.max
}
if (cnf.xaxis.min !== undefined && typeof cnf.xaxis.min === 'number') {
gl.minX = cnf.xaxis.min
}
// if range is provided, adjust the new minX
if (cnf.xaxis.range !== undefined) {
gl.minX = gl.maxX - cnf.xaxis.range
}
if (gl.minX !== Number.MAX_VALUE && gl.maxX !== -Number.MAX_VALUE) {
if (cnf.xaxis.convertedCatToNumeric && !gl.dataFormatXNumeric) {
let catScale = []
for (let i = gl.minX - 1; i < gl.maxX; i++) {
catScale.push(i + 1)
}
gl.xAxisScale = {
result: catScale,
niceMin: catScale[0],
niceMax: catScale[catScale.length - 1]
}
} else {
gl.xAxisScale = this.scales.setXScale(gl.minX, gl.maxX)
}
} else {
gl.xAxisScale = this.scales.linearScale(1, ticks, ticks)
if (gl.noLabelsProvided && gl.labels.length > 0) {
gl.xAxisScale = this.scales.linearScale(
1,
gl.labels.length,
ticks - 1
)
// this is the only place seriesX is again mutated
gl.seriesX = gl.labels.slice()
}
}
// we will still store these labels as the count for this will be different (to draw grid and labels placement)
if (isXNumeric) {
gl.labels = gl.xAxisScale.result.slice()
}
}
if (gl.isBarHorizontal && gl.labels.length) {
gl.xTickAmount = gl.labels.length
}
// single dataPoint
this._handleSingleDataPoint()
// minimum x difference to calculate bar width in numeric bars
this._getMinXDiff()
return {
minX: gl.minX,
maxX: gl.maxX
}
}
setZRange() {
// minZ, maxZ starts here
let gl = this.w.globals
if (!gl.isDataXYZ) return
for (let i = 0; i < gl.series.length; i++) {
if (typeof gl.seriesZ[i] !== 'undefined') {
for (let j = 0; j < gl.seriesZ[i].length; j++) {
if (gl.seriesZ[i][j] !== null && Utils.isNumber(gl.seriesZ[i][j])) {
gl.maxZ = Math.max(gl.maxZ, gl.seriesZ[i][j])
gl.minZ = Math.min(gl.minZ, gl.seriesZ[i][j])
}
}
}
}
}
_handleSingleDataPoint() {
const gl = this.w.globals
const cnf = this.w.config
if (gl.minX === gl.maxX) {
let datetimeObj = new DateTime(this.ctx)
if (cnf.xaxis.type === 'datetime') {
const newMinX = datetimeObj.getDate(gl.minX)
if (cnf.xaxis.labels.datetimeUTC) {
newMinX.setUTCDate(newMinX.getUTCDate() - 2)
} else {
newMinX.setDate(newMinX.getDate() - 2)
}
gl.minX = new Date(newMinX).getTime()
const newMaxX = datetimeObj.getDate(gl.maxX)
if (cnf.xaxis.labels.datetimeUTC) {
newMaxX.setUTCDate(newMaxX.getUTCDate() + 2)
} else {
newMaxX.setDate(newMaxX.getDate() + 2)
}
gl.maxX = new Date(newMaxX).getTime()
} else if (
cnf.xaxis.type === 'numeric' ||
(cnf.xaxis.type === 'category' && !gl.noLabelsProvided)
) {
gl.minX = gl.minX - 2
gl.initialMinX = gl.minX
gl.maxX = gl.maxX + 2
gl.initialMaxX = gl.maxX
}
}
}
_getMinXDiff() {
const gl = this.w.globals
if (gl.isXNumeric) {
// get the least x diff if numeric x axis is present
gl.seriesX.forEach((sX, i) => {
if (sX.length === 1) {
// a small hack to prevent overlapping multiple bars when there is just 1 datapoint in bar series.
// fix #811
sX.push(
gl.seriesX[gl.maxValsInArrayIndex][
gl.seriesX[gl.maxValsInArrayIndex].length - 1
]
)
}
// fix #983 (clone the array to avoid side effects)
const seriesX = sX.slice()
seriesX.sort((a, b) => a - b)
seriesX.forEach((s, j) => {
if (j > 0) {
let xDiff = s - seriesX[j - 1]
if (xDiff > 0) {
gl.minXDiff = Math.min(xDiff, gl.minXDiff)
}
}
})
if (gl.dataPoints === 1 || gl.minXDiff === Number.MAX_VALUE) {
// fixes apexcharts.js #1221
gl.minXDiff = 0.5
}
})
}
}
_setStackedMinMax() {
const gl = this.w.globals
// for stacked charts, we calculate each series's parallel values. i.e, series[0][j] + series[1][j] .... [series[i.length][j]] and get the max out of it
let stackedPoss = []
let stackedNegs = []
if (gl.series.length) {
for (let j = 0; j < gl.series[gl.maxValsInArrayIndex].length; j++) {
let poss = 0
let negs = 0
for (let i = 0; i < gl.series.length; i++) {
if (gl.series[i][j] !== null && Utils.isNumber(gl.series[i][j])) {
// 0.0001 fixes #185 when values are very small
gl.series[i][j] > 0
? (poss = poss + parseFloat(gl.series[i][j]) + 0.0001)
: (negs = negs + parseFloat(gl.series[i][j]))
}
if (i === gl.series.length - 1) {
// push all the totals to the array for future use
stackedPoss.push(poss)
stackedNegs.push(negs)
}
}
}
}
// get the max/min out of the added parallel values
for (let z = 0; z < stackedPoss.length; z++) {
gl.maxY = Math.max(gl.maxY, stackedPoss[z])
gl.minY = Math.min(gl.minY, stackedNegs[z])
}
}
}
export default Range

View File

@@ -1,73 +0,0 @@
import Config from './settings/Config'
import Utils from '../utils/Utils'
import CoreUtils from './CoreUtils'
/**
* ApexCharts Responsive Class to override options for different screen sizes.
*
* @module Responsive
**/
export default class Responsive {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
// the opts parameter if not null has to be set overriding everything
// as the opts is set by user externally
checkResponsiveConfig(opts) {
const w = this.w
const cnf = w.config
// check if responsive config exists
if (cnf.responsive.length === 0) return
let res = cnf.responsive.slice()
res
.sort((a, b) =>
a.breakpoint > b.breakpoint ? 1 : b.breakpoint > a.breakpoint ? -1 : 0
)
.reverse()
let config = new Config({})
const iterateResponsiveOptions = (newOptions = {}) => {
let largestBreakpoint = res[0].breakpoint
const width = window.innerWidth > 0 ? window.innerWidth : screen.width
if (width > largestBreakpoint) {
let options = CoreUtils.extendArrayProps(
config,
w.globals.initialConfig,
w
)
newOptions = Utils.extend(options, newOptions)
newOptions = Utils.extend(w.config, newOptions)
this.overrideResponsiveOptions(newOptions)
} else {
for (let i = 0; i < res.length; i++) {
if (width < res[i].breakpoint) {
newOptions = CoreUtils.extendArrayProps(config, res[i].options, w)
newOptions = Utils.extend(w.config, newOptions)
this.overrideResponsiveOptions(newOptions)
}
}
}
}
if (opts) {
let options = CoreUtils.extendArrayProps(config, opts, w)
options = Utils.extend(w.config, options)
options = Utils.extend(options, opts)
iterateResponsiveOptions(options)
} else {
iterateResponsiveOptions({})
}
}
overrideResponsiveOptions(newOptions) {
let newConfig = new Config(newOptions).init({ responsiveOverride: true })
this.w.config = newConfig
}
}

View File

@@ -1,586 +0,0 @@
import Utils from '../utils/Utils'
export default class Range {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
}
// http://stackoverflow.com/questions/326679/choosing-an-attractive-linear-scale-for-a-graphs-y-axiss
// This routine creates the Y axis values for a graph.
niceScale(yMin, yMax, ticks = 10, index = 0, NO_MIN_MAX_PROVIDED) {
const w = this.w
// Determine Range
let range = Math.abs(yMax - yMin)
ticks = this._adjustTicksForSmallRange(ticks, index, range)
if (ticks === 'dataPoints') {
ticks = w.globals.dataPoints - 1
}
if (
(yMin === Number.MIN_VALUE && yMax === 0) ||
(!Utils.isNumber(yMin) && !Utils.isNumber(yMax)) ||
(yMin === Number.MIN_VALUE && yMax === -Number.MAX_VALUE)
) {
// when all values are 0
yMin = 0
yMax = ticks
let linearScale = this.linearScale(yMin, yMax, ticks)
return linearScale
}
if (yMin > yMax) {
// if somehow due to some wrong config, user sent max less than min,
// adjust the min/max again
console.warn('axis.min cannot be greater than axis.max')
yMax = yMin + 0.1
} else if (yMin === yMax) {
// If yMin and yMax are identical, then
// adjust the yMin and yMax values to actually
// make a graph. Also avoids division by zero errors.
yMin = yMin === 0 ? 0 : yMin - 0.5 // some small value
yMax = yMax === 0 ? 2 : yMax + 0.5 // some small value
}
// Calculate Min amd Max graphical labels and graph
// increments. The number of ticks defaults to
// 10 which is the SUGGESTED value. Any tick value
// entered is used as a suggested value which is
// adjusted to be a 'pretty' value.
//
// Output will be an array of the Y axis values that
// encompass the Y values.
let result = []
if (
range < 1 &&
NO_MIN_MAX_PROVIDED &&
(w.config.chart.type === 'candlestick' ||
w.config.series[index].type === 'candlestick' ||
w.config.chart.type === 'boxPlot' ||
w.config.series[index].type === 'boxPlot' ||
w.globals.isRangeData)
) {
/* fix https://github.com/apexcharts/apexcharts.js/issues/430 */
yMax = yMax * 1.01
}
let tiks = ticks + 1
// Adjust ticks if needed
if (tiks < 2) {
tiks = 2
} else if (tiks > 2) {
tiks -= 2
}
// Get raw step value
let tempStep = range / tiks
// Calculate pretty step value
let mag = Math.floor(Utils.log10(tempStep))
let magPow = Math.pow(10, mag)
let magMsd = Math.round(tempStep / magPow)
if (magMsd < 1) {
magMsd = 1
}
let stepSize = magMsd * magPow
// build Y label array.
// Lower and upper bounds calculations
let lb = stepSize * Math.floor(yMin / stepSize)
let ub = stepSize * Math.ceil(yMax / stepSize)
// Build array
let val = lb
if (NO_MIN_MAX_PROVIDED && range > 2) {
while (1) {
result.push(val)
val += stepSize
if (val > ub) {
break
}
}
return {
result,
niceMin: result[0],
niceMax: result[result.length - 1]
}
} else {
result = []
let v = yMin
result.push(v)
let valuesDivider = Math.abs(yMax - yMin) / ticks
for (let i = 0; i <= ticks; i++) {
v = v + valuesDivider
result.push(v)
}
if (result[result.length - 2] >= yMax) {
result.pop()
}
return {
result,
niceMin: result[0],
niceMax: result[result.length - 1]
}
}
}
linearScale(yMin, yMax, ticks = 10, index) {
let range = Math.abs(yMax - yMin)
ticks = this._adjustTicksForSmallRange(ticks, index, range)
if (ticks === 'dataPoints') {
ticks = this.w.globals.dataPoints - 1
}
let step = range / ticks
if (ticks === Number.MAX_VALUE) {
ticks = 10
step = 1
}
let result = []
let v = yMin
while (ticks >= 0) {
result.push(v)
v = v + step
ticks -= 1
}
return {
result,
niceMin: result[0],
niceMax: result[result.length - 1]
}
}
logarithmicScaleNice(yMin, yMax, base) {
// Basic validation to avoid for loop starting at -inf.
if (yMax <= 0) yMax = Math.max(yMin, base)
if (yMin <= 0) yMin = Math.min(yMax, base)
const logs = []
const logMax = Math.ceil(Math.log(yMax) / Math.log(base) + 1) // Get powers of base for our max and min
const logMin = Math.floor(Math.log(yMin) / Math.log(base))
for (let i = logMin; i < logMax; i++) {
logs.push(Math.pow(base, i))
}
return {
result: logs,
niceMin: logs[0],
niceMax: logs[logs.length - 1]
}
}
logarithmicScale(yMin, yMax, base) {
// Basic validation to avoid for loop starting at -inf.
if (yMax <= 0) yMax = Math.max(yMin, base)
if (yMin <= 0) yMin = Math.min(yMax, base)
const logs = []
// Get the logarithmic range.
const logMax = Math.log(yMax) / Math.log(base)
const logMin = Math.log(yMin) / Math.log(base)
// Get the exact logarithmic range.
// (This is the exact number of multiples of the base there are between yMin and yMax).
const logRange = logMax - logMin
// Round the logarithmic range to get the number of ticks we will create.
// If the chosen min/max values are multiples of each other WRT the base, this will be neat.
// If the chosen min/max aren't, we will at least still provide USEFUL ticks.
const ticks = Math.round(logRange)
// Get the logarithmic spacing between ticks.
const logTickSpacing = logRange / ticks
// Create as many ticks as there is range in the logs.
for (let i = 0, logTick = logMin; i < ticks; i++, logTick += logTickSpacing) {
logs.push(Math.pow(base, logTick))
}
// Add a final tick at the yMax.
logs.push(Math.pow(base, logMax))
return {
result: logs,
niceMin: yMin,
niceMax: yMax
}
}
_adjustTicksForSmallRange(ticks, index, range) {
let newTicks = ticks
if (
typeof index !== 'undefined' &&
this.w.config.yaxis[index].labels.formatter &&
this.w.config.yaxis[index].tickAmount === undefined
) {
const formattedVal = this.w.config.yaxis[index].labels.formatter(1)
if (
Utils.isNumber(Number(formattedVal)) &&
!Utils.isFloat(formattedVal)
) {
newTicks = Math.ceil(range)
}
}
return newTicks < ticks ? newTicks : ticks
}
setYScaleForIndex(index, minY, maxY) {
const gl = this.w.globals
const cnf = this.w.config
let y = gl.isBarHorizontal ? cnf.xaxis : cnf.yaxis[index]
if (typeof gl.yAxisScale[index] === 'undefined') {
gl.yAxisScale[index] = []
}
let diff = Math.abs(maxY - minY)
if (y.logarithmic && diff <= 5) {
gl.invalidLogScale = true
}
if (y.logarithmic && diff > 5) {
gl.allSeriesCollapsed = false
gl.yAxisScale[index] = this.logarithmicScale(minY, maxY, y.logBase)
gl.yAxisScale[index] = y.forceNiceScale
? this.logarithmicScaleNice(minY, maxY, y.logBase)
: this.logarithmicScale(minY, maxY, y.logBase)
} else {
if (maxY === -Number.MAX_VALUE || !Utils.isNumber(maxY)) {
// no data in the chart. Either all series collapsed or user passed a blank array
gl.yAxisScale[index] = this.linearScale(0, 5, 5)
} else {
// there is some data. Turn off the allSeriesCollapsed flag
gl.allSeriesCollapsed = false
if ((y.min !== undefined || y.max !== undefined) && !y.forceNiceScale) {
// fix https://github.com/apexcharts/apexcharts.js/issues/492
gl.yAxisScale[index] = this.linearScale(
minY,
maxY,
y.tickAmount,
index
)
} else {
const noMinMaxProvided =
(cnf.yaxis[index].max === undefined &&
cnf.yaxis[index].min === undefined) ||
cnf.yaxis[index].forceNiceScale
gl.yAxisScale[index] = this.niceScale(
minY,
maxY,
y.tickAmount ? y.tickAmount : diff < 5 && diff > 1 ? diff + 1 : 5,
index,
// fix https://github.com/apexcharts/apexcharts.js/issues/397
noMinMaxProvided
)
}
}
}
}
setXScale(minX, maxX) {
const w = this.w
const gl = w.globals
const x = w.config.xaxis
let diff = Math.abs(maxX - minX)
if (maxX === -Number.MAX_VALUE || !Utils.isNumber(maxX)) {
// no data in the chart. Either all series collapsed or user passed a blank array
gl.xAxisScale = this.linearScale(0, 5, 5)
} else {
gl.xAxisScale = this.linearScale(
minX,
maxX,
x.tickAmount ? x.tickAmount : diff < 5 && diff > 1 ? diff + 1 : 5,
0
)
}
return gl.xAxisScale
}
setMultipleYScales() {
const gl = this.w.globals
const cnf = this.w.config
const minYArr = gl.minYArr.concat([])
const maxYArr = gl.maxYArr.concat([])
let scalesIndices = []
// here, we loop through the yaxis array and find the item which has "seriesName" property
cnf.yaxis.forEach((yaxe, i) => {
let index = i
cnf.series.forEach((s, si) => {
// if seriesName matches and that series is not collapsed, we use that scale
// fix issue #1215
// proceed even if si is in gl.collapsedSeriesIndices
if (s.name === yaxe.seriesName) {
index = si
if (i !== si) {
scalesIndices.push({
index: si,
similarIndex: i,
alreadyExists: true
})
} else {
scalesIndices.push({
index: si
})
}
}
})
let minY = minYArr[index]
let maxY = maxYArr[index]
this.setYScaleForIndex(i, minY, maxY)
})
this.sameScaleInMultipleAxes(minYArr, maxYArr, scalesIndices)
}
sameScaleInMultipleAxes(minYArr, maxYArr, scalesIndices) {
const cnf = this.w.config
const gl = this.w.globals
// we got the scalesIndices array in the above code, but we need to filter out the items which doesn't have same scales
let similarIndices = []
scalesIndices.forEach((scale) => {
if (scale.alreadyExists) {
if (typeof similarIndices[scale.index] === 'undefined') {
similarIndices[scale.index] = []
}
similarIndices[scale.index].push(scale.index)
similarIndices[scale.index].push(scale.similarIndex)
}
})
function intersect(a, b) {
return a.filter((value) => b.indexOf(value) !== -1)
}
gl.yAxisSameScaleIndices = similarIndices
similarIndices.forEach((si, i) => {
similarIndices.forEach((sj, j) => {
if (i !== j) {
if (intersect(si, sj).length > 0) {
similarIndices[i] = similarIndices[i].concat(similarIndices[j])
}
}
})
})
// then, we remove duplicates from the similarScale array
let uniqueSimilarIndices = similarIndices.map((item) => {
return item.filter((i, pos) => item.indexOf(i) === pos)
})
// sort further to remove whole duplicate arrays later
let sortedIndices = uniqueSimilarIndices.map((s) => s.sort())
// remove undefined items
similarIndices = similarIndices.filter((s) => !!s)
let indices = sortedIndices.slice()
let stringIndices = indices.map((ind) => JSON.stringify(ind))
indices = indices.filter(
(ind, p) => stringIndices.indexOf(JSON.stringify(ind)) === p
)
let sameScaleMinYArr = []
let sameScaleMaxYArr = []
minYArr.forEach((minYValue, yi) => {
indices.forEach((scale, i) => {
// we compare only the yIndex which exists in the indices array
if (scale.indexOf(yi) > -1) {
if (typeof sameScaleMinYArr[i] === 'undefined') {
sameScaleMinYArr[i] = []
sameScaleMaxYArr[i] = []
}
sameScaleMinYArr[i].push({
key: yi,
value: minYValue
})
sameScaleMaxYArr[i].push({
key: yi,
value: maxYArr[yi]
})
}
})
})
let sameScaleMin = Array.apply(null, Array(indices.length)).map(
Number.prototype.valueOf,
Number.MIN_VALUE
)
let sameScaleMax = Array.apply(null, Array(indices.length)).map(
Number.prototype.valueOf,
-Number.MAX_VALUE
)
sameScaleMinYArr.forEach((s, i) => {
s.forEach((sc, j) => {
sameScaleMin[i] = Math.min(sc.value, sameScaleMin[i])
})
})
sameScaleMaxYArr.forEach((s, i) => {
s.forEach((sc, j) => {
sameScaleMax[i] = Math.max(sc.value, sameScaleMax[i])
})
})
minYArr.forEach((min, i) => {
sameScaleMaxYArr.forEach((s, si) => {
let minY = sameScaleMin[si]
let maxY = sameScaleMax[si]
if (cnf.chart.stacked) {
// for stacked charts, we need to add the values
maxY = 0
s.forEach((ind, k) => {
// fix incorrectly adjust y scale issue #1215
if (ind.value !== -Number.MAX_VALUE) {
maxY += ind.value
}
if (minY !== Number.MIN_VALUE) {
minY += sameScaleMinYArr[si][k].value
}
})
}
s.forEach((ind, k) => {
if (s[k].key === i) {
if (cnf.yaxis[i].min !== undefined) {
if (typeof cnf.yaxis[i].min === 'function') {
minY = cnf.yaxis[i].min(gl.minY)
} else {
minY = cnf.yaxis[i].min
}
}
if (cnf.yaxis[i].max !== undefined) {
if (typeof cnf.yaxis[i].max === 'function') {
maxY = cnf.yaxis[i].max(gl.maxY)
} else {
maxY = cnf.yaxis[i].max
}
}
this.setYScaleForIndex(i, minY, maxY)
}
})
})
})
}
// experimental feature which scales the y-axis to a min/max based on x-axis range
autoScaleY(ctx, yaxis, e) {
if (!ctx) {
ctx = this
}
const w = ctx.w
if (w.globals.isMultipleYAxis || w.globals.collapsedSeries.length) {
// The autoScale option for multiple y-axis is turned off as it leads to buggy behavior.
// Also, when a series is collapsed, it results in incorrect behavior. Hence turned it off for that too - fixes apexcharts.js#795
console.warn('autoScaleYaxis is not supported in a multi-yaxis chart.')
return yaxis
}
const seriesX = w.globals.seriesX[0]
let isStacked = w.config.chart.stacked
yaxis.forEach((yaxe, yi) => {
let firstXIndex = 0
for (let xi = 0; xi < seriesX.length; xi++) {
if (seriesX[xi] >= e.xaxis.min) {
firstXIndex = xi
break
}
}
let initialMin = w.globals.minYArr[yi]
let initialMax = w.globals.maxYArr[yi]
let min, max
let stackedSer = w.globals.stackedSeriesTotals
w.globals.series.forEach((serie, sI) => {
let firstValue = serie[firstXIndex]
if (isStacked) {
firstValue = stackedSer[firstXIndex]
min = max = firstValue
stackedSer.forEach((y, yI) => {
if (seriesX[yI] <= e.xaxis.max && seriesX[yI] >= e.xaxis.min) {
if (y > max && y !== null) max = y
if (serie[yI] < min && serie[yI] !== null) min = serie[yI]
}
})
} else {
min = max = firstValue
serie.forEach((y, yI) => {
if (seriesX[yI] <= e.xaxis.max && seriesX[yI] >= e.xaxis.min) {
let valMin = y
let valMax = y
w.globals.series.forEach((wS, wSI) => {
if (y !== null) {
valMin = Math.min(wS[yI], valMin)
valMax = Math.max(wS[yI], valMax)
}
})
if (valMax > max && valMax !== null) max = valMax
if (valMin < min && valMin !== null) min = valMin
}
})
}
if (min === undefined && max === undefined) {
min = initialMin
max = initialMax
}
min *= min < 0 ? 1.1 : 0.9
max *= max < 0 ? 0.9 : 1.1
if (max < 0 && max < initialMax) {
max = initialMax
}
if (min < 0 && min > initialMin) {
min = initialMin
}
if (yaxis.length > 1) {
yaxis[sI].min = yaxe.min === undefined ? min : yaxe.min
yaxis[sI].max = yaxe.max === undefined ? max : yaxe.max
} else {
yaxis[0].min = yaxe.min === undefined ? min : yaxe.min
yaxis[0].max = yaxe.max === undefined ? max : yaxe.max
}
})
})
return yaxis
}
}

View File

@@ -1,453 +0,0 @@
import Graphics from './Graphics'
import Utils from '../utils/Utils'
/**
* ApexCharts Series Class for interaction with the Series of the chart.
*
* @module Series
**/
export default class Series {
constructor(ctx) {
this.ctx = ctx
this.w = ctx.w
this.legendInactiveClass = 'legend-mouseover-inactive'
}
getAllSeriesEls() {
return this.w.globals.dom.baseEl.getElementsByClassName(`apexcharts-series`)
}
getSeriesByName(seriesName) {
return this.w.globals.dom.baseEl.querySelector(
`.apexcharts-inner .apexcharts-series[seriesName='${Utils.escapeString(
seriesName
)}']`
)
}
isSeriesHidden(seriesName) {
const targetElement = this.getSeriesByName(seriesName)
let realIndex = parseInt(targetElement.getAttribute('data:realIndex'), 10)
let isHidden = targetElement.classList.contains(
'apexcharts-series-collapsed'
)
return { isHidden, realIndex }
}
addCollapsedClassToSeries(elSeries, index) {
const w = this.w
function iterateOnAllCollapsedSeries(series) {
for (let cs = 0; cs < series.length; cs++) {
if (series[cs].index === index) {
elSeries.node.classList.add('apexcharts-series-collapsed')
}
}
}
iterateOnAllCollapsedSeries(w.globals.collapsedSeries)
iterateOnAllCollapsedSeries(w.globals.ancillaryCollapsedSeries)
}
toggleSeries(seriesName) {
let isSeriesHidden = this.isSeriesHidden(seriesName)
this.ctx.legend.legendHelpers.toggleDataSeries(
isSeriesHidden.realIndex,
isSeriesHidden.isHidden
)
return isSeriesHidden.isHidden
}
showSeries(seriesName) {
let isSeriesHidden = this.isSeriesHidden(seriesName)
if (isSeriesHidden.isHidden) {
this.ctx.legend.legendHelpers.toggleDataSeries(
isSeriesHidden.realIndex,
true
)
}
}
hideSeries(seriesName) {
let isSeriesHidden = this.isSeriesHidden(seriesName)
if (!isSeriesHidden.isHidden) {
this.ctx.legend.legendHelpers.toggleDataSeries(
isSeriesHidden.realIndex,
false
)
}
}
resetSeries(
shouldUpdateChart = true,
shouldResetZoom = true,
shouldResetCollapsed = true
) {
const w = this.w
let series = Utils.clone(w.globals.initialSeries)
w.globals.previousPaths = []
if (shouldResetCollapsed) {
w.globals.collapsedSeries = []
w.globals.ancillaryCollapsedSeries = []
w.globals.collapsedSeriesIndices = []
w.globals.ancillaryCollapsedSeriesIndices = []
} else {
series = this.emptyCollapsedSeries(series)
}
w.config.series = series
if (shouldUpdateChart) {
if (shouldResetZoom) {
w.globals.zoomed = false
this.ctx.updateHelpers.revertDefaultAxisMinMax()
}
this.ctx.updateHelpers._updateSeries(
series,
w.config.chart.animations.dynamicAnimation.enabled
)
}
}
emptyCollapsedSeries(series) {
const w = this.w
for (let i = 0; i < series.length; i++) {
if (w.globals.collapsedSeriesIndices.indexOf(i) > -1) {
series[i].data = []
}
}
return series
}
toggleSeriesOnHover(e, targetElement) {
const w = this.w
if (!targetElement) targetElement = e.target
let allSeriesEls = w.globals.dom.baseEl.querySelectorAll(
`.apexcharts-series, .apexcharts-datalabels`
)
if (e.type === 'mousemove') {
let seriesCnt = parseInt(targetElement.getAttribute('rel'), 10) - 1
let seriesEl = null
let dataLabelEl = null
if (w.globals.axisCharts || w.config.chart.type === 'radialBar') {
if (w.globals.axisCharts) {
seriesEl = w.globals.dom.baseEl.querySelector(
`.apexcharts-series[data\\:realIndex='${seriesCnt}']`
)
dataLabelEl = w.globals.dom.baseEl.querySelector(
`.apexcharts-datalabels[data\\:realIndex='${seriesCnt}']`
)
} else {
seriesEl = w.globals.dom.baseEl.querySelector(
`.apexcharts-series[rel='${seriesCnt + 1}']`
)
}
} else {
seriesEl = w.globals.dom.baseEl.querySelector(
`.apexcharts-series[rel='${seriesCnt + 1}'] path`
)
}
for (let se = 0; se < allSeriesEls.length; se++) {
allSeriesEls[se].classList.add(this.legendInactiveClass)
}
if (seriesEl !== null) {
if (!w.globals.axisCharts) {
seriesEl.parentNode.classList.remove(this.legendInactiveClass)
}
seriesEl.classList.remove(this.legendInactiveClass)
if (dataLabelEl !== null) {
dataLabelEl.classList.remove(this.legendInactiveClass)
}
}
} else if (e.type === 'mouseout') {
for (let se = 0; se < allSeriesEls.length; se++) {
allSeriesEls[se].classList.remove(this.legendInactiveClass)
}
}
}
highlightRangeInSeries(e, targetElement) {
const w = this.w
const allHeatMapElements = w.globals.dom.baseEl.getElementsByClassName(
'apexcharts-heatmap-rect'
)
const activeInactive = (action) => {
for (let i = 0; i < allHeatMapElements.length; i++) {
allHeatMapElements[i].classList[action](this.legendInactiveClass)
}
}
const removeInactiveClassFromHoveredRange = (range) => {
for (let i = 0; i < allHeatMapElements.length; i++) {
const val = parseInt(allHeatMapElements[i].getAttribute('val'), 10)
if (val >= range.from && val <= range.to) {
allHeatMapElements[i].classList.remove(this.legendInactiveClass)
}
}
}
if (e.type === 'mousemove') {
let seriesCnt = parseInt(targetElement.getAttribute('rel'), 10) - 1
activeInactive('add')
const range = w.config.plotOptions.heatmap.colorScale.ranges[seriesCnt]
removeInactiveClassFromHoveredRange(range)
} else if (e.type === 'mouseout') {
activeInactive('remove')
}
}
getActiveConfigSeriesIndex(ignoreBars = false, order = 'asc') {
const w = this.w
let activeIndex = 0
if (w.config.series.length > 1) {
// active series flag is required to know if user has not deactivated via legend click
let activeSeriesIndex = w.config.series.map((s, index) => {
let hasBars = false
if (ignoreBars) {
hasBars =
w.config.series[index].type === 'bar' ||
w.config.series[index].type === 'column'
}
return s.data && s.data.length > 0 && !hasBars ? index : -1
})
for (
let a = order === 'asc' ? 0 : activeSeriesIndex.length - 1;
order === 'asc' ? a < activeSeriesIndex.length : a >= 0;
order === 'asc' ? a++ : a--
) {
if (activeSeriesIndex[a] !== -1) {
activeIndex = activeSeriesIndex[a]
break
}
}
}
return activeIndex
}
getPreviousPaths() {
let w = this.w
w.globals.previousPaths = []
function pushPaths(seriesEls, i, type) {
let paths = seriesEls[i].childNodes
let dArr = {
type,
paths: [],
realIndex: seriesEls[i].getAttribute('data:realIndex')
}
for (let j = 0; j < paths.length; j++) {
if (paths[j].hasAttribute('pathTo')) {
let d = paths[j].getAttribute('pathTo')
dArr.paths.push({
d
})
}
}
w.globals.previousPaths.push(dArr)
}
const getPaths = (chartType) => {
return w.globals.dom.baseEl.querySelectorAll(
`.apexcharts-${chartType}-series .apexcharts-series`
)
}
const chartTypes = [
'line',
'area',
'bar',
'rangebar',
'candlestick',
'radar'
]
chartTypes.forEach((type) => {
const paths = getPaths(type)
for (let p = 0; p < paths.length; p++) {
pushPaths(paths, p, type)
}
})
this.handlePrevBubbleScatterPaths('bubble')
this.handlePrevBubbleScatterPaths('scatter')
let heatTreeSeries = w.globals.dom.baseEl.querySelectorAll(
`.apexcharts-${w.config.chart.type} .apexcharts-series`
)
if (heatTreeSeries.length > 0) {
for (let h = 0; h < heatTreeSeries.length; h++) {
let seriesEls = w.globals.dom.baseEl.querySelectorAll(
`.apexcharts-${w.config.chart.type} .apexcharts-series[data\\:realIndex='${h}'] rect`
)
let dArr = []
for (let i = 0; i < seriesEls.length; i++) {
const getAttr = (x) => {
return seriesEls[i].getAttribute(x)
}
const rect = {
x: parseFloat(getAttr('x')),
y: parseFloat(getAttr('y')),
width: parseFloat(getAttr('width')),
height: parseFloat(getAttr('height'))
}
dArr.push({
rect,
color: seriesEls[i].getAttribute('color')
})
}
w.globals.previousPaths.push(dArr)
}
}
if (!w.globals.axisCharts) {
// for non-axis charts (i.e., circular charts, pathFrom is not usable. We need whole series)
w.globals.previousPaths = w.globals.series
}
}
handlePrevBubbleScatterPaths(type) {
const w = this.w
let paths = w.globals.dom.baseEl.querySelectorAll(
`.apexcharts-${type}-series .apexcharts-series`
)
if (paths.length > 0) {
for (let s = 0; s < paths.length; s++) {
let seriesEls = w.globals.dom.baseEl.querySelectorAll(
`.apexcharts-${type}-series .apexcharts-series[data\\:realIndex='${s}'] circle`
)
let dArr = []
for (let i = 0; i < seriesEls.length; i++) {
dArr.push({
x: seriesEls[i].getAttribute('cx'),
y: seriesEls[i].getAttribute('cy'),
r: seriesEls[i].getAttribute('r')
})
}
w.globals.previousPaths.push(dArr)
}
}
}
clearPreviousPaths() {
const w = this.w
w.globals.previousPaths = []
w.globals.allSeriesCollapsed = false
}
handleNoData() {
const w = this.w
const me = this
const noDataOpts = w.config.noData
const graphics = new Graphics(me.ctx)
let x = w.globals.svgWidth / 2
let y = w.globals.svgHeight / 2
let textAnchor = 'middle'
w.globals.noData = true
w.globals.animationEnded = true
if (noDataOpts.align === 'left') {
x = 10
textAnchor = 'start'
} else if (noDataOpts.align === 'right') {
x = w.globals.svgWidth - 10
textAnchor = 'end'
}
if (noDataOpts.verticalAlign === 'top') {
y = 50
} else if (noDataOpts.verticalAlign === 'bottom') {
y = w.globals.svgHeight - 50
}
x = x + noDataOpts.offsetX
y = y + parseInt(noDataOpts.style.fontSize, 10) + 2 + noDataOpts.offsetY
if (noDataOpts.text !== undefined && noDataOpts.text !== '') {
let titleText = graphics.drawText({
x,
y,
text: noDataOpts.text,
textAnchor,
fontSize: noDataOpts.style.fontSize,
fontFamily: noDataOpts.style.fontFamily,
foreColor: noDataOpts.style.color,
opacity: 1,
class: 'apexcharts-text-nodata'
})
w.globals.dom.Paper.add(titleText)
}
}
// When user clicks on legends, the collapsed series is filled with [0,0,0,...,0]
// This is because we don't want to alter the series' length as it is used at many places
setNullSeriesToZeroValues(series) {
let w = this.w
for (let sl = 0; sl < series.length; sl++) {
if (series[sl].length === 0) {
for (let j = 0; j < series[w.globals.maxValsInArrayIndex].length; j++) {
series[sl].push(0)
}
}
}
return series
}
hasAllSeriesEqualX() {
let equalLen = true
const w = this.w
const filteredSerX = this.filteredSeriesX()
for (let i = 0; i < filteredSerX.length - 1; i++) {
if (filteredSerX[i][0] !== filteredSerX[i + 1][0]) {
equalLen = false
break
}
}
w.globals.allSeriesHasEqualX = equalLen
return equalLen
}
filteredSeriesX() {
const w = this.w
const filteredSeriesX = w.globals.seriesX.map((ser) =>
ser.length > 0 ? ser : []
)
return filteredSeriesX
}
}

View File

@@ -1,239 +0,0 @@
import Utils from '../utils/Utils'
/**
* ApexCharts Theme Class for setting the colors and palettes.
*
* @module Theme
**/
export default class Theme {
constructor(ctx) {
this.ctx = ctx
this.colors = []
this.w = ctx.w
const w = this.w
this.isColorFn = false
this.isHeatmapDistributed =
(w.config.chart.type === 'treemap' &&
w.config.plotOptions.treemap.distributed) ||
(w.config.chart.type === 'heatmap' &&
w.config.plotOptions.heatmap.distributed)
this.isBarDistributed =
w.config.plotOptions.bar.distributed &&
(w.config.chart.type === 'bar' || w.config.chart.type === 'rangeBar')
}
init() {
this.setDefaultColors()
}
setDefaultColors() {
let w = this.w
let utils = new Utils()
w.globals.dom.elWrap.classList.add(
`apexcharts-theme-${w.config.theme.mode}`
)
if (w.config.colors === undefined) {
w.globals.colors = this.predefined()
} else {
w.globals.colors = w.config.colors
// if user provided a function in colors, we need to eval here
if (
Array.isArray(w.config.colors) &&
w.config.colors.length > 0 &&
typeof w.config.colors[0] === 'function'
) {
w.globals.colors = w.config.series.map((s, i) => {
let c = w.config.colors[i]
if (!c) c = w.config.colors[0]
if (typeof c === 'function') {
this.isColorFn = true
return c({
value: w.globals.axisCharts
? w.globals.series[i][0]
? w.globals.series[i][0]
: 0
: w.globals.series[i],
seriesIndex: i,
dataPointIndex: i,
w
})
}
return c
})
}
}
// user defined colors in series array
w.globals.seriesColors.map((c, i) => {
if (c) {
w.globals.colors[i] = c
}
})
if (w.config.theme.monochrome.enabled) {
let monoArr = []
let glsCnt = w.globals.series.length
if (this.isBarDistributed || this.isHeatmapDistributed) {
glsCnt = w.globals.series[0].length * w.globals.series.length
}
let mainColor = w.config.theme.monochrome.color
let part = 1 / (glsCnt / w.config.theme.monochrome.shadeIntensity)
let shade = w.config.theme.monochrome.shadeTo
let percent = 0
for (let gsl = 0; gsl < glsCnt; gsl++) {
let newColor
if (shade === 'dark') {
newColor = utils.shadeColor(percent * -1, mainColor)
percent = percent + part
} else {
newColor = utils.shadeColor(percent, mainColor)
percent = percent + part
}
monoArr.push(newColor)
}
w.globals.colors = monoArr.slice()
}
const defaultColors = w.globals.colors.slice()
// if user specified fewer colors than no. of series, push the same colors again
this.pushExtraColors(w.globals.colors)
const colorTypes = ['fill', 'stroke']
colorTypes.forEach((c) => {
if (w.config[c].colors === undefined) {
w.globals[c].colors = this.isColorFn ? w.config.colors : defaultColors
} else {
w.globals[c].colors = w.config[c].colors.slice()
}
this.pushExtraColors(w.globals[c].colors)
})
if (w.config.dataLabels.style.colors === undefined) {
w.globals.dataLabels.style.colors = defaultColors
} else {
w.globals.dataLabels.style.colors = w.config.dataLabels.style.colors.slice()
}
this.pushExtraColors(w.globals.dataLabels.style.colors, 50)
if (w.config.plotOptions.radar.polygons.fill.colors === undefined) {
w.globals.radarPolygons.fill.colors = [
w.config.theme.mode === 'dark' ? '#424242' : 'none'
]
} else {
w.globals.radarPolygons.fill.colors = w.config.plotOptions.radar.polygons.fill.colors.slice()
}
this.pushExtraColors(w.globals.radarPolygons.fill.colors, 20)
// The point colors
if (w.config.markers.colors === undefined) {
w.globals.markers.colors = defaultColors
} else {
w.globals.markers.colors = w.config.markers.colors.slice()
}
this.pushExtraColors(w.globals.markers.colors)
}
// When the number of colors provided is less than the number of series, this method
// will push same colors to the list
// params:
// distributed is only valid for distributed column/bar charts
pushExtraColors(colorSeries, length, distributed = null) {
let w = this.w
let len = length || w.globals.series.length
if (distributed === null) {
distributed =
this.isBarDistributed ||
this.isHeatmapDistributed ||
(w.config.chart.type === 'heatmap' &&
w.config.plotOptions.heatmap.colorScale.inverse)
}
if (distributed && w.globals.series.length) {
len =
w.globals.series[w.globals.maxValsInArrayIndex].length *
w.globals.series.length
}
if (colorSeries.length < len) {
let diff = len - colorSeries.length
for (let i = 0; i < diff; i++) {
colorSeries.push(colorSeries[i])
}
}
}
updateThemeOptions(options) {
options.chart = options.chart || {}
options.tooltip = options.tooltip || {}
const mode = options.theme.mode || 'light'
const palette = options.theme.palette
? options.theme.palette
: mode === 'dark'
? 'palette4'
: 'palette1'
const foreColor = options.chart.foreColor
? options.chart.foreColor
: mode === 'dark'
? '#f6f7f8'
: '#373d3f'
options.tooltip.theme = mode
options.chart.foreColor = foreColor
options.theme.palette = palette
return options
}
predefined() {
let palette = this.w.config.theme.palette
// D6E3F8, FCEFEF, DCE0D9, A5978B, EDDDD4, D6E3F8, FEF5EF
switch (palette) {
case 'palette1':
this.colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']
break
case 'palette2':
this.colors = ['#3f51b5', '#03a9f4', '#4caf50', '#f9ce1d', '#FF9800']
break
case 'palette3':
this.colors = ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B']
break
case 'palette4':
this.colors = ['#4ecdc4', '#c7f464', '#81D4FA', '#fd6a6a', '#546E7A']
break
case 'palette5':
this.colors = ['#2b908f', '#f9a3a4', '#90ee7e', '#fa4443', '#69d2e7']
break
case 'palette6':
this.colors = ['#449DD1', '#F86624', '#EA3546', '#662E9B', '#C5D86D']
break
case 'palette7':
this.colors = ['#D7263D', '#1B998B', '#2E294E', '#F46036', '#E2C044']
break
case 'palette8':
this.colors = ['#662E9B', '#F86624', '#F9C80E', '#EA3546', '#43BCCD']
break
case 'palette9':
this.colors = ['#5C4742', '#A5978B', '#8D5B4C', '#5A2A27', '#C4BBAF']
break
case 'palette10':
this.colors = ['#A300D6', '#7D02EB', '#5653FE', '#2983FF', '#00B1F2']
break
default:
this.colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']
break
}
return this.colors
}
}

Some files were not shown because too many files have changed in this diff Show More