chartist 1.2.1 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -111
- package/dist/_settings.scss +1 -1
- package/dist/charts/BarChart/BarChart.d.ts.map +1 -1
- package/dist/charts/BarChart/BarChart.types.d.ts +3 -2
- package/dist/charts/BarChart/BarChart.types.d.ts.map +1 -1
- package/dist/charts/BaseChart.d.ts.map +1 -1
- package/dist/core/creation.d.ts.map +1 -1
- package/dist/index.cjs +33 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +33 -15
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/svg/Svg.d.ts +2 -2
- package/package.json +7 -5
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
[downloads]: https://img.shields.io/npm/dm/chartist.svg
|
|
14
14
|
[downloads-url]: https://www.npmjs.com/package/chartist
|
|
15
15
|
|
|
16
|
-
[build]: https://img.shields.io/github/workflow/status/chartist-js/chartist/
|
|
16
|
+
[build]: https://img.shields.io/github/actions/workflow/status/chartist-js/chartist/ci.yml
|
|
17
17
|
[build-url]: https://github.com/chartist-js/chartist/actions
|
|
18
18
|
|
|
19
19
|
[coverage]: https://img.shields.io/codecov/c/github/chartist-js/chartist.svg
|
|
@@ -45,9 +45,11 @@ That's why we started Chartist and our goal is to solve all of the above issues.
|
|
|
45
45
|
<span> • </span>
|
|
46
46
|
<a href="#what-is-it-made-for">What is it made for?</a>
|
|
47
47
|
<span> • </span>
|
|
48
|
-
<a href="
|
|
48
|
+
<a href="https://chartist.dev/docs/whats-new-in-v1">What's new in v1?</a>
|
|
49
49
|
<span> • </span>
|
|
50
|
-
<a href="
|
|
50
|
+
<a href="https://chartist.dev/">Docs</a>
|
|
51
|
+
<span> • </span>
|
|
52
|
+
<a href="https://chartist.dev/examples">Examples</a>
|
|
51
53
|
<span> • </span>
|
|
52
54
|
<a href="#contribution">Contribution</a>
|
|
53
55
|
<hr />
|
|
@@ -103,114 +105,6 @@ also means that Chartist does not provide it's own event handling, labels, behav
|
|
|
103
105
|
done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing "Simple
|
|
104
106
|
responsive Charts" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.
|
|
105
107
|
|
|
106
|
-
## What's new in v1?
|
|
107
|
-
|
|
108
|
-
### ESM
|
|
109
|
-
|
|
110
|
-
Now Chartist is truly an ES module and exposes its API through the exports, thus making Chartist [tree-shakable](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking).
|
|
111
|
-
|
|
112
|
-
<details>
|
|
113
|
-
<summary>Migration from v0.11</summary>
|
|
114
|
-
|
|
115
|
-
- Each property of Chartist object now is named export.
|
|
116
|
-
- Chart classes were renamed.
|
|
117
|
-
- Easing object now is named export.
|
|
118
|
-
|
|
119
|
-
```js
|
|
120
|
-
const Chartist = require('chartist')
|
|
121
|
-
|
|
122
|
-
new Chartist.Bar(/* ... */);
|
|
123
|
-
new Chartist.Line(/* ... */);
|
|
124
|
-
new Chartist.Pie(/* ... */);
|
|
125
|
-
new Chartist.Svg(/* ... */);
|
|
126
|
-
Chartist.Svg.Easing
|
|
127
|
-
// ...
|
|
128
|
-
|
|
129
|
-
// ->
|
|
130
|
-
|
|
131
|
-
import { BarChart, LineChart, PieChart, Svg, easings } from 'chartist'
|
|
132
|
-
|
|
133
|
-
new BarChart(/* ... */)
|
|
134
|
-
new LineChart(/* ... */)
|
|
135
|
-
new PieChart(/* ... */)
|
|
136
|
-
new Svg(/* ... */)
|
|
137
|
-
easings
|
|
138
|
-
// ...
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
</details>
|
|
142
|
-
|
|
143
|
-
### TypeScript
|
|
144
|
-
|
|
145
|
-
Chartist was rewritten and fully typed with TypeScript.
|
|
146
|
-
|
|
147
|
-
<details>
|
|
148
|
-
<summary>Some of exposed types</summary>
|
|
149
|
-
|
|
150
|
-
```ts
|
|
151
|
-
import type {
|
|
152
|
-
BarChartData,
|
|
153
|
-
BarChartOptions,
|
|
154
|
-
LineChartData,
|
|
155
|
-
LineChartOptions,
|
|
156
|
-
PieChartData,
|
|
157
|
-
PieChartOptions
|
|
158
|
-
} from 'chartist'
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
</details>
|
|
162
|
-
|
|
163
|
-
## Examples
|
|
164
|
-
|
|
165
|
-
<details>
|
|
166
|
-
<summary>Bar Chart</summary>
|
|
167
|
-
|
|
168
|
-
- [Bi-polar bar chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/bi-polar-interpolated)
|
|
169
|
-
- [Distributed series](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/distributed-series)
|
|
170
|
-
- [Extreme responsive configuration](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/extreme-responsive)
|
|
171
|
-
- [Horizontal bar chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/horizontal)
|
|
172
|
-
- [Label placement](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/label-position)
|
|
173
|
-
- [Multi-line labels](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/multiline)
|
|
174
|
-
- [Overlapping bars on mobile](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/overlapping-bars)
|
|
175
|
-
- [Stacked bar chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/stacked)
|
|
176
|
-
- [Add peak circles using the draw events](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/with-circle-modify-drawing)
|
|
177
|
-
|
|
178
|
-
</details>
|
|
179
|
-
|
|
180
|
-
<details>
|
|
181
|
-
<summary>Line Chart</summary>
|
|
182
|
-
|
|
183
|
-
- [Line chart with area](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/area)
|
|
184
|
-
- [Auto scale axis](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/axis-auto)
|
|
185
|
-
- [Fixed and auto scale axis](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/axis-fixed-and-auto)
|
|
186
|
-
- [Bi-polar Line chart with area only](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/bipolar-area)
|
|
187
|
-
- [Filled holes in data](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/data-fill-holes)
|
|
188
|
-
- [Holes in data](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/data-holes)
|
|
189
|
-
- [Using events to replace graphics](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/modify-drawing)
|
|
190
|
-
- [Only whole numbers](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/only-integer)
|
|
191
|
-
- [SVG Path animation](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/path-animation)
|
|
192
|
-
- [Line scatter diagram with responsive settings](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/scatter-random)
|
|
193
|
-
- [Series Overrides](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/series-override)
|
|
194
|
-
- [Simple line chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple)
|
|
195
|
-
- [Simple responsive options](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple-responsive)
|
|
196
|
-
- [Line Interpolation / Smoothing](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple-smoothing)
|
|
197
|
-
- [Simple SMIL Animations](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple-svg-animation)
|
|
198
|
-
- [Advanced SMIL Animations](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/svg-animation)
|
|
199
|
-
- [Timeseries](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/timeseries)
|
|
200
|
-
|
|
201
|
-
</details>
|
|
202
|
-
|
|
203
|
-
<details>
|
|
204
|
-
<summary>Pie Chart</summary>
|
|
205
|
-
|
|
206
|
-
- [Pie chart with custom labels](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/custom-labels)
|
|
207
|
-
- [Animating a Donut with Svg.animate](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/donut-animation)
|
|
208
|
-
- [Donut chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/donut-chart)
|
|
209
|
-
- [Simple pie chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/simple)
|
|
210
|
-
- [Gauge chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/simple-gauge)
|
|
211
|
-
|
|
212
|
-
</details>
|
|
213
|
-
|
|
214
108
|
## Plugins
|
|
215
109
|
|
|
216
110
|
Coming soon.
|
package/dist/_settings.scss
CHANGED
|
@@ -34,7 +34,7 @@ $ct-text-color: rgba(0, 0, 0, 0.4) !default;
|
|
|
34
34
|
$ct-text-size: 0.75rem !default;
|
|
35
35
|
$ct-text-align: flex-start !default;
|
|
36
36
|
$ct-text-justify: flex-start !default;
|
|
37
|
-
$ct-text-line-height: 1;
|
|
37
|
+
$ct-text-line-height: 1 !default;
|
|
38
38
|
|
|
39
39
|
// Grid styles
|
|
40
40
|
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/charts/BarChart/BarChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,2BAA2B,EAG3B,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,YAAY,CAAC;AAoBpB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/charts/BarChart/BarChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,2BAA2B,EAG3B,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,YAAY,CAAC;AAoBpB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAmHzC,qBAAa,QAAS,SAAQ,SAAS,CAAC,mBAAmB,CAAC;cAyCrC,IAAI,EAAE,YAAY;IAxCvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;gBAED,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,EACX,IAAI,EAAE,YAAY,EACrC,OAAO,CAAC,EAAE,eAAe,EACzB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC;IAWxD;;OAEG;IACH,WAAW,CAAC,OAAO,EAAE,2BAA2B;CAoZjD"}
|
|
@@ -30,10 +30,11 @@ export interface BarChartOptions<TXAxisOptions = AxisOptions, TYAxisOptions = TX
|
|
|
30
30
|
*/
|
|
31
31
|
stackBars?: boolean;
|
|
32
32
|
/**
|
|
33
|
-
* If set to
|
|
33
|
+
* If set to true this property will force the stacked bars to draw from the zero line.
|
|
34
34
|
* If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
|
|
35
|
+
* If set to 'accumulate-relative' positive and negative values will be handled separately.
|
|
35
36
|
*/
|
|
36
|
-
stackMode?: 'accumulate' | boolean;
|
|
37
|
+
stackMode?: 'accumulate' | 'accumulate-relative' | boolean;
|
|
37
38
|
/**
|
|
38
39
|
* Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
|
|
39
40
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.types.d.ts","sourceRoot":"","sources":["../../../src/charts/BarChart/BarChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,oBAAY,YAAY,GAAG,IAAI,CAAC;AAEhC,MAAM,WAAW,eAAe,CAC9B,aAAa,GAAG,WAAW,EAC3B,aAAa,GAAG,aAAa,CAC7B,SAAQ,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB
|
|
1
|
+
{"version":3,"file":"BarChart.types.d.ts","sourceRoot":"","sources":["../../../src/charts/BarChart/BarChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,oBAAY,YAAY,GAAG,IAAI,CAAC;AAEhC,MAAM,WAAW,eAAe,CAC9B,aAAa,GAAG,WAAW,EAC3B,aAAa,GAAG,aAAa,CAC7B,SAAQ,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,qBAAqB,GAAG,OAAO,CAAC;IAC3D;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,oBAAY,2BAA2B,GAAG,YAAY,CACpD,eAAe,CACb,YAAY,CACV,WAAW,EACT,QAAQ,GACR,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,uBAAuB,GACvB,eAAe,CAClB,EACD,YAAY,CACV,WAAW,EACT,QAAQ,GACR,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,uBAAuB,GACvB,eAAe,CAClB,CACF,EACC,gBAAgB,GAChB,cAAc,GACd,mBAAmB,GACnB,WAAW,GACX,OAAO,GACP,OAAO,EACT,YAAY,CACb,CAAC;AAEF,oBAAY,oBAAoB,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC;AAEjE,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,oBAAY,mBAAmB,GAAG,oBAAoB,CACpD,oBAAoB,EACpB,aAAa,GAAG,YAAY,CAC7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseChart.d.ts","sourceRoot":"","sources":["../../src/charts/BaseChart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,8BAAsB,SAAS,CAAC,YAAY,GAAG,oBAAoB;IAe/D,SAAS,CAAC,IAAI,EAAE,IAAI;IACpB,OAAO,CAAC,QAAQ,CAAC,cAAc;IAC/B,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC;IAjBrC,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IACtC,SAAS,CAAC,QAAQ,CAAC,YAAY,eAAsB;IACrD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAGtD,OAAO,CAAC,mBAAmB,CAGzB;IACF,OAAO,CAAC,eAAe,CAAC,CAA2B;gBAGjD,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,EACpB,IAAI,EAAE,IAAI,EACH,cAAc,EAAE,OAAO,EAChC,OAAO,EAAE,OAAO,EACP,iBAAiB,CAAC,sGAA4B;
|
|
1
|
+
{"version":3,"file":"BaseChart.d.ts","sourceRoot":"","sources":["../../src/charts/BaseChart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,8BAAsB,SAAS,CAAC,YAAY,GAAG,oBAAoB;IAe/D,SAAS,CAAC,IAAI,EAAE,IAAI;IACpB,OAAO,CAAC,QAAQ,CAAC,cAAc;IAC/B,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC;IAjBrC,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IACtC,SAAS,CAAC,QAAQ,CAAC,YAAY,eAAsB;IACrD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAGtD,OAAO,CAAC,mBAAmB,CAGzB;IACF,OAAO,CAAC,eAAe,CAAC,CAA2B;gBAGjD,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,EACpB,IAAI,EAAE,IAAI,EACH,cAAc,EAAE,OAAO,EAChC,OAAO,EAAE,OAAO,EACP,iBAAiB,CAAC,sGAA4B;IAyBjE,QAAQ,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAQ5C;;;;;OAKG;IACH,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,UAAQ;IAwCvD;;OAEG;IACH,MAAM;IAeN;;;;OAIG;IACH,EAAE,CAAC,CAAC,SAAS,MAAM,YAAY,EAC7B,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GACvC,IAAI;IACP,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,iBAAiB,GAAG,IAAI;IACjD,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAOhD;;;;OAIG;IACH,GAAG,CAAC,CAAC,SAAS,MAAM,YAAY,EAC9B,KAAK,EAAE,CAAC,EACR,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GACxC,IAAI;IACP,GAAG,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,iBAAiB,GAAG,IAAI;IACnD,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI;IAOlD,UAAU;CAuCX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"creation.d.ts","sourceRoot":"","sources":["../../src/core/creation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,KAAK,EAIN,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,SAAS,EAAE,OAAO,EAClB,KAAK,GAAE,MAAM,GAAG,MAAe,EAC/B,MAAM,GAAE,MAAM,GAAG,MAAe,EAChC,SAAS,CAAC,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"creation.d.ts","sourceRoot":"","sources":["../../src/core/creation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,KAAK,EAIN,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,SAAS,EAAE,OAAO,EAClB,KAAK,GAAE,MAAM,GAAG,MAAe,EAC/B,MAAM,GAAE,MAAM,GAAG,MAAe,EAChC,SAAS,CAAC,EAAE,MAAM,OA+BnB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,GAAG,SAAS;;;;;EAiBpD;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO;;;;;;;;;;;;;EA0EzD;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,MAAM,EAAE,EACjB,YAAY,EAAE,YAAY,QAoB3B;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,YAAY,QAoB3B;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACrC,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,MAAM,EAAE,EACjB,YAAY,EAAE,YAAY,QAiC3B"}
|
package/dist/index.cjs
CHANGED
|
@@ -229,7 +229,11 @@ function extend() {
|
|
|
229
229
|
}
|
|
230
230
|
for(let i = 0; i < sources.length; i++){
|
|
231
231
|
const source = sources[i];
|
|
232
|
+
const targetProto = Object.getPrototypeOf(target);
|
|
232
233
|
for(const prop in source){
|
|
234
|
+
if (targetProto !== null && prop in targetProto) {
|
|
235
|
+
continue; // prevent prototype pollution
|
|
236
|
+
}
|
|
233
237
|
const sourceProp = source[prop];
|
|
234
238
|
if (typeof sourceProp === "object" && sourceProp !== null && !(sourceProp instanceof Array)) {
|
|
235
239
|
target[prop] = extend(target[prop], sourceProp);
|
|
@@ -1127,16 +1131,16 @@ function createAnimation(element, attribute, animationDefinition) {
|
|
|
1127
1131
|
return this;
|
|
1128
1132
|
}
|
|
1129
1133
|
/**
|
|
1130
|
-
* Get element height using `
|
|
1134
|
+
* Get element height using `clientHeight`
|
|
1131
1135
|
* @return The elements height in pixels
|
|
1132
1136
|
*/ height() {
|
|
1133
|
-
return this._node.
|
|
1137
|
+
return this._node.clientHeight;
|
|
1134
1138
|
}
|
|
1135
1139
|
/**
|
|
1136
|
-
* Get element width using `
|
|
1140
|
+
* Get element width using `clientWidth`
|
|
1137
1141
|
* @return The elements width in pixels
|
|
1138
1142
|
*/ width() {
|
|
1139
|
-
return this._node.
|
|
1143
|
+
return this._node.clientWidth;
|
|
1140
1144
|
}
|
|
1141
1145
|
/**
|
|
1142
1146
|
* The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes. Please refer to http://www.w3.org/TR/SVG/animate.html for a detailed specification about the available animation attributes. Additionally an easing property can be passed in the animation definition object. This can be a string with a name of an easing function in `Svg.Easing` or an array with four numbers specifying a cubic Bézier curve.
|
|
@@ -1238,6 +1242,9 @@ function createAnimation(element, attribute, animationDefinition) {
|
|
|
1238
1242
|
* @return The created/reinitialized SVG element
|
|
1239
1243
|
*/ function createSvg(container) {
|
|
1240
1244
|
let width = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "100%", height = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "100%", className = arguments.length > 3 ? arguments[3] : void 0;
|
|
1245
|
+
if (!container) {
|
|
1246
|
+
throw new Error("Container element is not found");
|
|
1247
|
+
}
|
|
1241
1248
|
// Check if there is a previous SVG element in the container that contains the Chartist XML namespace and remove it
|
|
1242
1249
|
// Since the DOM API does not support namespaces we need to manually search the returned list http://www.w3.org/TR/selectors-api/
|
|
1243
1250
|
Array.from(container.querySelectorAll("svg")).filter((svg)=>svg.getAttributeNS(namespaces.xmlns, "ct")
|
|
@@ -1421,7 +1428,7 @@ function createAnimation(element, attribute, animationDefinition) {
|
|
|
1421
1428
|
responsiveOptions.forEach((responsiveOption)=>{
|
|
1422
1429
|
const mql = window.matchMedia(responsiveOption[0]);
|
|
1423
1430
|
if (mql.matches) {
|
|
1424
|
-
currentOptions = extend(currentOptions, responsiveOption[1]);
|
|
1431
|
+
currentOptions = extend({}, currentOptions, responsiveOption[1]);
|
|
1425
1432
|
}
|
|
1426
1433
|
});
|
|
1427
1434
|
}
|
|
@@ -2270,7 +2277,7 @@ class BaseChart {
|
|
|
2270
2277
|
, 0);
|
|
2271
2278
|
const container = typeof query === "string" ? document.querySelector(query) : query;
|
|
2272
2279
|
if (!container) {
|
|
2273
|
-
throw new Error("Target element is not found");
|
|
2280
|
+
throw new Error("Target element ".concat(typeof query === "string" ? '"'.concat(query, '"') : "", " is not found"));
|
|
2274
2281
|
}
|
|
2275
2282
|
this.container = container;
|
|
2276
2283
|
const prevInstance = instances.get(container);
|
|
@@ -2919,8 +2926,9 @@ function getSerialSums(series) {
|
|
|
2919
2926
|
seriesBarDistance: 15,
|
|
2920
2927
|
// If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options.
|
|
2921
2928
|
stackBars: false,
|
|
2922
|
-
// If set to
|
|
2929
|
+
// If set to true this property will force the stacked bars to draw from the zero line.
|
|
2923
2930
|
// If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
|
|
2931
|
+
// If set to 'accumulate-relative' positive and negative values will be handled separately.
|
|
2924
2932
|
stackMode: "accumulate",
|
|
2925
2933
|
// Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
|
|
2926
2934
|
horizontalBars: false,
|
|
@@ -3029,8 +3037,12 @@ class BarChart extends BaseChart {
|
|
|
3029
3037
|
}
|
|
3030
3038
|
// Projected 0 point
|
|
3031
3039
|
const zeroPoint = options.horizontalBars ? chartRect.x1 + valueAxis.projectValue(0) : chartRect.y1 - valueAxis.projectValue(0);
|
|
3040
|
+
const isAccumulateStackMode = options.stackMode === "accumulate";
|
|
3041
|
+
const isAccumulateRelativeStackMode = options.stackMode === "accumulate-relative";
|
|
3032
3042
|
// Used to track the screen coordinates of stacked bars
|
|
3033
|
-
const
|
|
3043
|
+
const posStackedBarValues = [];
|
|
3044
|
+
const negStackedBarValues = [];
|
|
3045
|
+
let stackedBarValues = posStackedBarValues;
|
|
3034
3046
|
labelAxis.createGridAndLabels(gridGroup, labelGroup, options, this.eventEmitter);
|
|
3035
3047
|
valueAxis.createGridAndLabels(gridGroup, labelGroup, options, this.eventEmitter);
|
|
3036
3048
|
if (options.showGridBackground) {
|
|
@@ -3077,6 +3089,8 @@ class BarChart extends BaseChart {
|
|
|
3077
3089
|
seriesClassName || "".concat(options.classNames.series, "-").concat(alphaNumerate(seriesIndex))
|
|
3078
3090
|
].join(" "));
|
|
3079
3091
|
normalizedData.series[seriesIndex].forEach((value, valueIndex)=>{
|
|
3092
|
+
const valueX = safeHasProperty(value, "x") && value.x;
|
|
3093
|
+
const valueY = safeHasProperty(value, "y") && value.y;
|
|
3080
3094
|
let labelAxisValueIndex;
|
|
3081
3095
|
// We need to set labelAxisValueIndex based on some options combinations
|
|
3082
3096
|
if (options.distributeSeries && !options.stackBars) {
|
|
@@ -3095,13 +3109,13 @@ class BarChart extends BaseChart {
|
|
|
3095
3109
|
// We need to transform coordinates differently based on the chart layout
|
|
3096
3110
|
if (options.horizontalBars) {
|
|
3097
3111
|
projected = {
|
|
3098
|
-
x: chartRect.x1 + valueAxis.projectValue(
|
|
3099
|
-
y: chartRect.y1 - labelAxis.projectValue(
|
|
3112
|
+
x: chartRect.x1 + valueAxis.projectValue(valueX || 0, valueIndex, normalizedData.series[seriesIndex]),
|
|
3113
|
+
y: chartRect.y1 - labelAxis.projectValue(valueY || 0, labelAxisValueIndex, normalizedData.series[seriesIndex])
|
|
3100
3114
|
};
|
|
3101
3115
|
} else {
|
|
3102
3116
|
projected = {
|
|
3103
|
-
x: chartRect.x1 + labelAxis.projectValue(
|
|
3104
|
-
y: chartRect.y1 - valueAxis.projectValue(
|
|
3117
|
+
x: chartRect.x1 + labelAxis.projectValue(valueX || 0, labelAxisValueIndex, normalizedData.series[seriesIndex]),
|
|
3118
|
+
y: chartRect.y1 - valueAxis.projectValue(valueY || 0, valueIndex, normalizedData.series[seriesIndex])
|
|
3105
3119
|
};
|
|
3106
3120
|
}
|
|
3107
3121
|
// If the label axis is a step based axis we will offset the bar into the middle of between two steps using
|
|
@@ -3116,6 +3130,10 @@ class BarChart extends BaseChart {
|
|
|
3116
3130
|
// Using bi-polar offset for multiple series if no stacked bars or series distribution is used
|
|
3117
3131
|
projected[labelAxis.units.pos] += options.stackBars || options.distributeSeries ? 0 : biPol * options.seriesBarDistance * (options.horizontalBars ? -1 : 1);
|
|
3118
3132
|
}
|
|
3133
|
+
// distinguish between positive and negative values in relative stack mode
|
|
3134
|
+
if (isAccumulateRelativeStackMode) {
|
|
3135
|
+
stackedBarValues = valueY >= 0 || valueX >= 0 ? posStackedBarValues : negStackedBarValues;
|
|
3136
|
+
}
|
|
3119
3137
|
// Enter value in stacked bar values used to remember previous screen value for stacking up bars
|
|
3120
3138
|
const previousStack = stackedBarValues[valueIndex] || zeroPoint;
|
|
3121
3139
|
stackedBarValues[valueIndex] = previousStack - (zeroPoint - projected[labelAxis.counterUnits.pos]);
|
|
@@ -3127,7 +3145,7 @@ class BarChart extends BaseChart {
|
|
|
3127
3145
|
["".concat(labelAxis.units.pos, "1")]: projected[labelAxis.units.pos],
|
|
3128
3146
|
["".concat(labelAxis.units.pos, "2")]: projected[labelAxis.units.pos]
|
|
3129
3147
|
};
|
|
3130
|
-
if (options.stackBars && (
|
|
3148
|
+
if (options.stackBars && (isAccumulateStackMode || isAccumulateRelativeStackMode || !options.stackMode)) {
|
|
3131
3149
|
// Stack mode: accumulate (default)
|
|
3132
3150
|
// If bars are stacked we use the stackedBarValues reference and otherwise base all bars off the zero line
|
|
3133
3151
|
// We want backwards compatibility, so the expected fallback without the 'stackMode' option
|
|
@@ -3149,8 +3167,8 @@ class BarChart extends BaseChart {
|
|
|
3149
3167
|
// Create bar element
|
|
3150
3168
|
const bar = seriesElement.elem("line", positions, options.classNames.bar).attr({
|
|
3151
3169
|
"ct:value": [
|
|
3152
|
-
|
|
3153
|
-
|
|
3170
|
+
valueX,
|
|
3171
|
+
valueY
|
|
3154
3172
|
].filter(isNumeric).join(","),
|
|
3155
3173
|
"ct:meta": serialize(metaData)
|
|
3156
3174
|
});
|