charts-core 0.0.14 → 0.0.16
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 +46 -1
- package/dist/charts-core.css +1 -1
- package/dist/charts-core.js +297 -241
- package/dist/charts-core.js.map +1 -1
- package/dist/charts-core.umd.cjs +1 -67
- package/dist/charts-core.umd.cjs.map +1 -1
- package/package.json +6 -4
package/README.md
CHANGED
|
@@ -1 +1,46 @@
|
|
|
1
|
-
# ChartsCore
|
|
1
|
+
# ChartsCore Library
|
|
2
|
+
|
|
3
|
+
## Installation
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm i charts-core
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Quick start
|
|
10
|
+
|
|
11
|
+
### Line chart
|
|
12
|
+
|
|
13
|
+
[See full Line chart documentation](./src/docs/line-chart.md)
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
// to create new instance of chart
|
|
17
|
+
const chart = createLineChart('#line-chart', {
|
|
18
|
+
data: [
|
|
19
|
+
{ date: '2025-02-02T00:00:00.000Z', value: 2800 },
|
|
20
|
+
{ date: '2025-02-16T00:00:00.000Z', value: 2970 },
|
|
21
|
+
{ date: '2025-03-02T00:00:00.000Z', value: 4120 },
|
|
22
|
+
{ date: '2025-03-16T00:00:00.000Z', value: 4260 },
|
|
23
|
+
{ date: '2025-04-02T00:00:00.000Z', value: 4120 },
|
|
24
|
+
],
|
|
25
|
+
config: {
|
|
26
|
+
margin: {
|
|
27
|
+
right: 50,
|
|
28
|
+
},
|
|
29
|
+
yAxis: {
|
|
30
|
+
customTicks: true,
|
|
31
|
+
ticks: [8, 'd'],
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
})
|
|
35
|
+
|
|
36
|
+
// to update it
|
|
37
|
+
chart.update({
|
|
38
|
+
data: newData,
|
|
39
|
+
config: {
|
|
40
|
+
theme: 'dark',
|
|
41
|
+
},
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
// or destroy
|
|
45
|
+
chart.destroy()
|
|
46
|
+
```
|
package/dist/charts-core.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sc-charts{--sc-color-main-line: #007aff;--sc-color-hover-circle-fill: #007aff;--sc-color-hover-circle-stroke: #ffffff;--sc-color-range-circle-stroke: #ffffff;--sc-color-selection-up: #56b683;--sc-color-selection-up-label-text: #56b683;--sc-color-selection-down: #f18169;--sc-color-selection-down-label-text: #e8674b;--sc-color-text-secondary: #8e8e93;color:var(--sc-color-text-base)}.sc-charts__light{--sc-color-bg: #ffffff;--sc-color-axis-text: #ababae;--sc-color-axis-zero-line: #ededed;--sc-color-selection-down-label-bg: #fdf5f3;--sc-color-selection-down-label-border: #fde8e3;--sc-color-selection-up-label-bg: #f3f9f5;--sc-color-selection-up-label-border: #d9eee0;--sc-color-text-base: #1c2026;--sc-color-main-line-muted: #d9ebff;--sc-color-main-line-selected-muted: #ededed;--sc-color-hover-line: #c7c7c9}.sc-charts__dark{--sc-color-bg: #101213;--sc-color-axis-text: #8e8e93;--sc-color-axis-zero-line: #3d3d3d;--sc-color-selection-down-label-bg: #2d1915;--sc-color-selection-down-label-border: #6c3a2f;--sc-color-selection-up-label-bg: #192b23;--sc-color-selection-up-label-border: #254034;--sc-color-text-base: #ffffff;--sc-color-main-line-muted: #0e2236;--sc-color-main-line-selected-muted: #292929;--sc-color-hover-line: #ffffff}.sc-charts__main-line{stroke:var(--sc-color-main-line);stroke-width:2;fill:none;transition:all .3s}.sc-charts__main-line_muted{stroke:var(--sc-color-main-line-muted);transition:all .3s}.sc-charts__main-line_selected-muted{stroke:var(--sc-color-main-line-selected-muted);transition:all .3s}.sc-charts__range-label{overflow:visible;-webkit-user-select:none;user-select:none;font-family:inherit;font-weight:400;font-size:14px}.sc-charts__range-label-container{display:inline-block;white-space:nowrap;padding:8px 12px;border:1px solid;border-radius:8px;transform:translate(-50%)}.sc-charts__range-label-sum{font-weight:600;margin-bottom:2px}.sc-charts__range-label_up .sc-charts__range-label-container{background-color:var(--sc-color-selection-up-label-bg);border-color:var(--sc-color-selection-up-label-border)}.sc-charts__range-label_up .sc-charts__range-label-sum{color:var(--sc-color-selection-up-label-text)}.sc-charts__range-label_down .sc-charts__range-label-container{background-color:var(--sc-color-selection-down-label-bg);border-color:var(--sc-color-selection-down-label-border)}.sc-charts__range-label_down .sc-charts__range-label-sum{color:var(--sc-color-selection-down-label-text)}.sc-charts__hover-circle{stroke:var(--sc-color-hover-circle-stroke);fill:var(--sc-color-hover-circle-fill);stroke-width:2}.sc-charts__range-circle-left,.sc-charts__range-circle-right{stroke:var(--sc-color-range-circle-stroke);stroke-width:2}.sc-charts__range-circle-left_up,.sc-charts__range-circle-right_up{fill:var(--sc-color-selection-up)}.sc-charts__range-circle-left_down,.sc-charts__range-circle-right_down{fill:var(--sc-color-selection-down)}.sc-charts__range-line{fill:none;stroke-width:2}.sc-charts__range-line_up{stroke:var(--sc-color-selection-up)}.sc-charts__range-line_down{stroke:var(--sc-color-selection-down)}.sc-charts__border-range-line{stroke-width:1}.sc-charts__border-range-line_up{stroke:url(#gradient-range-borders-up)}.sc-charts__border-range-line_down{stroke:url(#gradient-range-borders-down)}.sc-charts__hover-line{stroke:url(#hover-line-gradient);stroke-width:1}.sc-charts__highlight-line{stroke-width:2;fill:none;stroke:var(--sc-color-main-line)}
|
|
1
|
+
.sc-charts{--sc-color-main-line: #007aff;--sc-color-hover-circle-fill: #007aff;--sc-color-hover-circle-stroke: #ffffff;--sc-color-range-circle-stroke: #ffffff;--sc-color-selection-up: #56b683;--sc-color-selection-up-label-text: #56b683;--sc-color-selection-down: #f18169;--sc-color-selection-down-label-text: #e8674b;--sc-color-text-secondary: #8e8e93;--sc-size-axis-text: 12px;color:var(--sc-color-text-base)}.sc-charts__light{--sc-color-bg: #ffffff;--sc-color-axis-text: #ababae;--sc-color-axis-zero-line: #ededed;--sc-color-selection-down-label-bg: #fdf5f3;--sc-color-selection-down-label-border: #fde8e3;--sc-color-selection-up-label-bg: #f3f9f5;--sc-color-selection-up-label-border: #d9eee0;--sc-color-text-base: #1c2026;--sc-color-main-line-muted: #d9ebff;--sc-color-main-line-selected-muted: #ededed;--sc-color-hover-line: #c7c7c9;--sc-color-hover-tooltip-border: #ededed;--sc-color-hover-tooltip-bg: #ffffff}.sc-charts__dark{--sc-color-bg: #101213;--sc-color-axis-text: #8e8e93;--sc-color-axis-zero-line: #3d3d3d;--sc-color-selection-down-label-bg: #2d1915;--sc-color-selection-down-label-border: #6c3a2f;--sc-color-selection-up-label-bg: #192b23;--sc-color-selection-up-label-border: #254034;--sc-color-text-base: #ffffff;--sc-color-main-line-muted: #0e2236;--sc-color-main-line-selected-muted: #292929;--sc-color-hover-line: #ffffff;--sc-color-hover-tooltip-border: #343b46;--sc-color-hover-tooltip-bg: #1c2026}.sc-charts__main-line{stroke:var(--sc-color-main-line);stroke-width:2;fill:none;transition:all .3s;stroke-linecap:round;stroke-linejoin:round}.sc-charts__main-line_muted{stroke:var(--sc-color-main-line-muted);transition:all .3s}.sc-charts__main-line_selected-muted{stroke:var(--sc-color-main-line-selected-muted);transition:all .3s}.sc-charts__range-label{overflow:visible;-webkit-user-select:none;user-select:none;font-family:inherit;font-weight:400;font-size:14px}.sc-charts__range-label-container{display:inline-block;white-space:nowrap;padding:8px 12px;border:1px solid;border-radius:8px;transform:translate(-50%)}.sc-charts__range-label-sum{font-weight:600;margin-bottom:2px}.sc-charts__range-label_up .sc-charts__range-label-container{background-color:var(--sc-color-selection-up-label-bg);border-color:var(--sc-color-selection-up-label-border)}.sc-charts__range-label_up .sc-charts__range-label-sum{color:var(--sc-color-selection-up-label-text)}.sc-charts__range-label_down .sc-charts__range-label-container{background-color:var(--sc-color-selection-down-label-bg);border-color:var(--sc-color-selection-down-label-border)}.sc-charts__range-label_down .sc-charts__range-label-sum{color:var(--sc-color-selection-down-label-text)}.sc-charts__hover-circle{stroke:var(--sc-color-hover-circle-stroke);fill:var(--sc-color-hover-circle-fill);stroke-width:2}.sc-charts__range-circle-left,.sc-charts__range-circle-right{stroke:var(--sc-color-range-circle-stroke);stroke-width:2}.sc-charts__range-circle-left_up,.sc-charts__range-circle-right_up{fill:var(--sc-color-selection-up)}.sc-charts__range-circle-left_down,.sc-charts__range-circle-right_down{fill:var(--sc-color-selection-down)}.sc-charts__range-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sc-charts__range-line_up{stroke:var(--sc-color-selection-up)}.sc-charts__range-line_down{stroke:var(--sc-color-selection-down)}.sc-charts__border-range-line{stroke-width:1}.sc-charts__border-range-line_up{stroke:url(#gradient-range-borders-up)}.sc-charts__border-range-line_down{stroke:url(#gradient-range-borders-down)}.sc-charts__hover-line{stroke:url(#hover-line-gradient);stroke-width:1}.sc-charts__highlight-line{stroke-width:2;fill:none;stroke:var(--sc-color-main-line);stroke-linecap:round;stroke-linejoin:round}.sc-charts__hover-tooltip{overflow:visible;-webkit-user-select:none;user-select:none;font-family:inherit;font-weight:400;font-size:14px}.sc-charts__hover-tooltip-container{display:inline-block;white-space:nowrap;padding:8px 12px;border-style:solid;border-width:1px;border-color:var(--sc-color-hover-tooltip-border);background-color:var(--sc-color-hover-tooltip-bg);border-radius:8px}.sc-charts__hover-tooltip-sum{font-weight:600;margin-bottom:2px;padding-left:6px;position:relative}.sc-charts__hover-tooltip-sum:before{content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);border-radius:2px;left:0;width:1.5px;background-color:var(--sc-color-main-line);height:14px}.sc-charts__hover-tooltip-time{color:var(--sc-color-text-secondary)}.sc-charts__x-axis-tick,.sc-charts__y-axis-tick{color:var(--sc-color-axis-text);font-size:var(--sc-size-axis-text);line-height:var(--sc-size-axis-text)}.sc-charts__main-line-area{fill:url(#main-line-area-gradient);opacity:.1;transition:all .3s}.sc-charts__main-line-area_hidden{opacity:0;transition:all .3s}
|