chartist 1.3.0 → 1.4.0
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 -112
- package/dist/charts/BaseChart.d.ts.map +1 -1
- package/dist/charts/PieChart/PieChart.d.ts +8 -0
- package/dist/charts/PieChart/PieChart.d.ts.map +1 -1
- package/dist/charts/PieChart/PieChart.types.d.ts +5 -1
- package/dist/charts/PieChart/PieChart.types.d.ts.map +1 -1
- package/dist/core/creation.d.ts.map +1 -1
- package/dist/index.cjs +38 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +38 -7
- 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 +2 -3
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,115 +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
|
-
- [Stacked bar chart with accumulate-relative stack mode](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/stacked-accumulate-relative)
|
|
177
|
-
- [Add peak circles using the draw events](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/with-circle-modify-drawing)
|
|
178
|
-
|
|
179
|
-
</details>
|
|
180
|
-
|
|
181
|
-
<details>
|
|
182
|
-
<summary>Line Chart</summary>
|
|
183
|
-
|
|
184
|
-
- [Line chart with area](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/area)
|
|
185
|
-
- [Auto scale axis](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/axis-auto)
|
|
186
|
-
- [Fixed and auto scale axis](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/axis-fixed-and-auto)
|
|
187
|
-
- [Bi-polar Line chart with area only](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/bipolar-area)
|
|
188
|
-
- [Filled holes in data](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/data-fill-holes)
|
|
189
|
-
- [Holes in data](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/data-holes)
|
|
190
|
-
- [Using events to replace graphics](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/modify-drawing)
|
|
191
|
-
- [Only whole numbers](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/only-integer)
|
|
192
|
-
- [SVG Path animation](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/path-animation)
|
|
193
|
-
- [Line scatter diagram with responsive settings](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/scatter-random)
|
|
194
|
-
- [Series Overrides](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/series-override)
|
|
195
|
-
- [Simple line chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple)
|
|
196
|
-
- [Simple responsive options](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple-responsive)
|
|
197
|
-
- [Line Interpolation / Smoothing](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple-smoothing)
|
|
198
|
-
- [Simple SMIL Animations](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple-svg-animation)
|
|
199
|
-
- [Advanced SMIL Animations](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/svg-animation)
|
|
200
|
-
- [Timeseries](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/timeseries)
|
|
201
|
-
|
|
202
|
-
</details>
|
|
203
|
-
|
|
204
|
-
<details>
|
|
205
|
-
<summary>Pie Chart</summary>
|
|
206
|
-
|
|
207
|
-
- [Pie chart with custom labels](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/custom-labels)
|
|
208
|
-
- [Animating a Donut with Svg.animate](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/donut-animation)
|
|
209
|
-
- [Donut chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/donut-chart)
|
|
210
|
-
- [Simple pie chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/simple)
|
|
211
|
-
- [Gauge chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/pie/simple-gauge)
|
|
212
|
-
|
|
213
|
-
</details>
|
|
214
|
-
|
|
215
108
|
## Plugins
|
|
216
109
|
|
|
217
110
|
Coming soon.
|
|
@@ -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"}
|
|
@@ -83,6 +83,14 @@ export declare class PieChart extends BaseChart<PieChartEventsTypes> {
|
|
|
83
83
|
* ```
|
|
84
84
|
*/
|
|
85
85
|
constructor(query: string | Element | null, data: PieChartData, options?: PieChartOptions, responsiveOptions?: ResponsiveOptions<PieChartOptions>);
|
|
86
|
+
/**
|
|
87
|
+
* Check if a label has overlapping text then move it the number of pixels up and left based on textSize.
|
|
88
|
+
* @param labelPos - Label position that chartist will be checking does not overlap with the list of LabelPositions.
|
|
89
|
+
* @param existingLabelPos - Label position that has already been placed that chartist will check against.
|
|
90
|
+
* @param textOffset - this is configured with preventOverlappingLabelOffset option.
|
|
91
|
+
* @param length - How many characters long the label is.
|
|
92
|
+
*/
|
|
93
|
+
moveLabel(labelPos: Dot, existingLabelPos: Dot, textOffset: number, length: number): void;
|
|
86
94
|
/**
|
|
87
95
|
* Creates the pie chart
|
|
88
96
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../src/charts/PieChart/PieChart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EACd,GAAG,EACH,YAAY,EACZ,eAAe,EACf,2BAA2B,EAI3B,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../src/charts/PieChart/PieChart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EACd,GAAG,EACH,YAAY,EACZ,eAAe,EACf,2BAA2B,EAI3B,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA8CzC;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,GAAG,EACX,KAAK,EAAE,GAAG,EACV,SAAS,EAAE,cAAc,GACxB,cAAc,CAgBhB;AAED,qBAAa,QAAS,SAAQ,SAAS,CAAC,mBAAmB,CAAC;cA8ErC,IAAI,EAAE,YAAY;IA7EvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0EG;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;;;;;;OAMG;IACH,SAAS,CACP,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,GAAG,EACrB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM;IAchB;;;;OAIG;IACH,WAAW,CAAC,OAAO,EAAE,2BAA2B;CAwRjD"}
|
|
@@ -68,8 +68,12 @@ export interface PieChartOptions extends Omit<Options, 'axisX' | 'axisY'> {
|
|
|
68
68
|
* If true empty values will be ignored to avoid drawing unnecessary slices and labels
|
|
69
69
|
*/
|
|
70
70
|
ignoreEmptyValues?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* If nonzero labels will not overlap.
|
|
73
|
+
*/
|
|
74
|
+
preventOverlappingLabelOffset?: number;
|
|
71
75
|
}
|
|
72
|
-
export declare type PieChartOptionsWithDefaults = RequiredKeys<PieChartOptions, 'chartPadding' | 'startAngle' | 'donutWidth' | 'showLabel' | 'labelOffset' | 'labelPosition' | 'labelInterpolationFnc' | 'labelDirection', 'classNames'>;
|
|
76
|
+
export declare type PieChartOptionsWithDefaults = RequiredKeys<PieChartOptions, 'chartPadding' | 'startAngle' | 'donutWidth' | 'showLabel' | 'labelOffset' | 'labelPosition' | 'labelInterpolationFnc' | 'labelDirection' | 'preventOverlappingLabelOffset', 'classNames'>;
|
|
73
77
|
export declare type PieChartCreatedEvent = Omit<CreatedEvent<PieChartOptions>, 'axisX' | 'axisY'>;
|
|
74
78
|
export interface SliceDrawEvent extends Omit<DrawEvent, 'axisX' | 'axisY' | 'seriesIndex'> {
|
|
75
79
|
type: 'slice';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PieChart.types.d.ts","sourceRoot":"","sources":["../../../src/charts/PieChart/PieChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,KAAK,EACL,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EACtB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,oBAAY,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;AAE5C,oBAAY,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/D,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD,oBAAY,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElE,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;OAEG;IACH,qBAAqB,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9E;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PieChart.types.d.ts","sourceRoot":"","sources":["../../../src/charts/PieChart/PieChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,KAAK,EACL,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EACtB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,oBAAY,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;AAE5C,oBAAY,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/D,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD,oBAAY,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElE,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;OAEG;IACH,qBAAqB,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9E;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;CACxC;AAED,oBAAY,2BAA2B,GAAG,YAAY,CACpD,eAAe,EACb,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,+BAA+B,EACjC,YAAY,CACb,CAAC;AAEF,oBAAY,oBAAoB,GAAG,IAAI,CACrC,YAAY,CAAC,eAAe,CAAC,EAC7B,OAAO,GAAG,OAAO,CAClB,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;IAC1D,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,qBAAqB,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;IAC1D,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,mBAAmB,GAAG,oBAAoB,CACpD,oBAAoB,EACpB,cAAc,GAAG,mBAAmB,CACrC,CAAC"}
|
|
@@ -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);
|
|
@@ -3270,7 +3277,9 @@ class BarChart extends BaseChart {
|
|
|
3270
3277
|
// Label direction can be 'neutral', 'explode' or 'implode'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.
|
|
3271
3278
|
labelDirection: "neutral",
|
|
3272
3279
|
// If true empty values will be ignored to avoid drawing unnecessary slices and labels
|
|
3273
|
-
ignoreEmptyValues: false
|
|
3280
|
+
ignoreEmptyValues: false,
|
|
3281
|
+
// If Nonzero check if a label has overlapping text then move it the number of pixels up and left (Should be half of label font size + 1 but you can tweak it as you prefer)
|
|
3282
|
+
preventOverlappingLabelOffset: 0
|
|
3274
3283
|
};
|
|
3275
3284
|
/**
|
|
3276
3285
|
* Determines SVG anchor position based on direction and center parameter
|
|
@@ -3286,6 +3295,19 @@ class BarChart extends BaseChart {
|
|
|
3286
3295
|
}
|
|
3287
3296
|
class PieChart extends BaseChart {
|
|
3288
3297
|
/**
|
|
3298
|
+
* Check if a label has overlapping text then move it the number of pixels up and left based on textSize.
|
|
3299
|
+
* @param labelPos - Label position that chartist will be checking does not overlap with the list of LabelPositions.
|
|
3300
|
+
* @param existingLabelPos - Label position that has already been placed that chartist will check against.
|
|
3301
|
+
* @param textOffset - this is configured with preventOverlappingLabelOffset option.
|
|
3302
|
+
* @param length - How many characters long the label is.
|
|
3303
|
+
*/ moveLabel(labelPos, existingLabelPos, textOffset, length) {
|
|
3304
|
+
if (labelPos.y > existingLabelPos.y - textOffset && labelPos.y < existingLabelPos.y + textOffset && labelPos.x > existingLabelPos.x - length * textOffset && labelPos.x < existingLabelPos.x + length * textOffset) {
|
|
3305
|
+
labelPos.y -= textOffset;
|
|
3306
|
+
labelPos.x -= textOffset;
|
|
3307
|
+
this.moveLabel(labelPos, existingLabelPos, textOffset, length);
|
|
3308
|
+
}
|
|
3309
|
+
}
|
|
3310
|
+
/**
|
|
3289
3311
|
* Creates the pie chart
|
|
3290
3312
|
*
|
|
3291
3313
|
* @param options
|
|
@@ -3294,6 +3316,7 @@ class PieChart extends BaseChart {
|
|
|
3294
3316
|
const normalizedData = normalizeData(data);
|
|
3295
3317
|
const seriesGroups = [];
|
|
3296
3318
|
let labelsGroup;
|
|
3319
|
+
const labelPositions = [];
|
|
3297
3320
|
let labelRadius;
|
|
3298
3321
|
let startAngle = options.startAngle;
|
|
3299
3322
|
// Create SVG.js draw
|
|
@@ -3437,6 +3460,14 @@ class PieChart extends BaseChart {
|
|
|
3437
3460
|
}
|
|
3438
3461
|
const interpolatedValue = options.labelInterpolationFnc(rawValue, index);
|
|
3439
3462
|
if (interpolatedValue || interpolatedValue === 0) {
|
|
3463
|
+
if (options.preventOverlappingLabelOffset) {
|
|
3464
|
+
const textOffset = options.preventOverlappingLabelOffset;
|
|
3465
|
+
const length = String(normalizedData.labels[index]).length;
|
|
3466
|
+
labelPositions.forEach((item)=>{
|
|
3467
|
+
this.moveLabel(labelPosition, item, textOffset, length);
|
|
3468
|
+
});
|
|
3469
|
+
labelPositions.push(labelPosition);
|
|
3470
|
+
}
|
|
3440
3471
|
const labelElement = labelsGroup.elem("text", {
|
|
3441
3472
|
dx: labelPosition.x,
|
|
3442
3473
|
dy: labelPosition.y,
|