@oliasoft-open-source/charts-library 7.0.0 → 7.0.1-beta-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/dist/index.d.ts +888 -13
- package/dist/index.js +100 -11
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -19020,6 +19020,7 @@ var MouseEvents = /* @__PURE__ */ function(MouseEvents) {
|
|
|
19020
19020
|
MouseEvents["MOUSEUP"] = "mouseup";
|
|
19021
19021
|
return MouseEvents;
|
|
19022
19022
|
}({});
|
|
19023
|
+
/** Annotation shape identifiers. */
|
|
19023
19024
|
var AnnotationType$1 = /* @__PURE__ */ function(AnnotationType) {
|
|
19024
19025
|
AnnotationType["POINT"] = "point";
|
|
19025
19026
|
AnnotationType["BOX"] = "box";
|
|
@@ -19028,6 +19029,7 @@ var AnnotationType$1 = /* @__PURE__ */ function(AnnotationType) {
|
|
|
19028
19029
|
AnnotationType["LABEL"] = "label";
|
|
19029
19030
|
return AnnotationType;
|
|
19030
19031
|
}({});
|
|
19032
|
+
/** Allowed axes for annotation dragging. */
|
|
19031
19033
|
var DragAxis = /* @__PURE__ */ function(DragAxis) {
|
|
19032
19034
|
DragAxis["X"] = "x";
|
|
19033
19035
|
DragAxis["Y"] = "y";
|
|
@@ -19036,6 +19038,7 @@ var DragAxis = /* @__PURE__ */ function(DragAxis) {
|
|
|
19036
19038
|
}({});
|
|
19037
19039
|
//#endregion
|
|
19038
19040
|
//#region src/components/common/plugins/gradient-background-plugin/enums.ts
|
|
19041
|
+
/** Direction of the background gradient between chart-area edges or corners. */
|
|
19039
19042
|
var GradientDirection = /* @__PURE__ */ function(GradientDirection) {
|
|
19040
19043
|
GradientDirection[GradientDirection["TopToBottom"] = 0] = "TopToBottom";
|
|
19041
19044
|
GradientDirection[GradientDirection["BottomToTop"] = 1] = "BottomToTop";
|
|
@@ -19049,11 +19052,13 @@ var GradientDirection = /* @__PURE__ */ function(GradientDirection) {
|
|
|
19049
19052
|
}({});
|
|
19050
19053
|
//#endregion
|
|
19051
19054
|
//#region src/components/common/enums.ts
|
|
19055
|
+
/** Cartesian axis identifiers. */
|
|
19052
19056
|
var AxisType = /* @__PURE__ */ function(AxisType) {
|
|
19053
19057
|
AxisType["X"] = "x";
|
|
19054
19058
|
AxisType["Y"] = "y";
|
|
19055
19059
|
return AxisType;
|
|
19056
19060
|
}({});
|
|
19061
|
+
/** Legend/layout positions. Individual options accept only the positions relevant to their layout. */
|
|
19057
19062
|
var Position = /* @__PURE__ */ function(Position) {
|
|
19058
19063
|
Position["Bottom"] = "bottom";
|
|
19059
19064
|
Position["Top"] = "top";
|
|
@@ -19065,6 +19070,7 @@ var Position = /* @__PURE__ */ function(Position) {
|
|
|
19065
19070
|
Position["BottomRight"] = "bottom-right";
|
|
19066
19071
|
return Position;
|
|
19067
19072
|
}({});
|
|
19073
|
+
/** Chart.js chart-kind identifiers used by the library. */
|
|
19068
19074
|
var ChartType = /* @__PURE__ */ function(ChartType) {
|
|
19069
19075
|
ChartType["LINE"] = "line";
|
|
19070
19076
|
ChartType["BAR"] = "bar";
|
|
@@ -19073,6 +19079,7 @@ var ChartType = /* @__PURE__ */ function(ChartType) {
|
|
|
19073
19079
|
ChartType["SCATTER"] = "scatter";
|
|
19074
19080
|
return ChartType;
|
|
19075
19081
|
}({});
|
|
19082
|
+
/** CSS cursors used during chart interactions. */
|
|
19076
19083
|
var CursorStyle = /* @__PURE__ */ function(CursorStyle) {
|
|
19077
19084
|
CursorStyle["Pointer"] = "pointer";
|
|
19078
19085
|
CursorStyle["Initial"] = "initial";
|
|
@@ -19082,6 +19089,7 @@ var CursorStyle = /* @__PURE__ */ function(CursorStyle) {
|
|
|
19082
19089
|
CursorStyle["Move"] = "move";
|
|
19083
19090
|
return CursorStyle;
|
|
19084
19091
|
}({});
|
|
19092
|
+
/** Chart.js scale-family identifiers. */
|
|
19085
19093
|
var ScaleType = /* @__PURE__ */ function(ScaleType) {
|
|
19086
19094
|
ScaleType["Category"] = "category";
|
|
19087
19095
|
ScaleType["Linear"] = "linear";
|
|
@@ -19090,16 +19098,19 @@ var ScaleType = /* @__PURE__ */ function(ScaleType) {
|
|
|
19090
19098
|
ScaleType["TimeSeries"] = "timeseries";
|
|
19091
19099
|
return ScaleType;
|
|
19092
19100
|
}({});
|
|
19101
|
+
/** Cartesian rendering orientation; this does not select LineChart tooltip content. */
|
|
19093
19102
|
var ChartDirection = /* @__PURE__ */ function(ChartDirection) {
|
|
19094
19103
|
ChartDirection["VERTICAL"] = "vertical";
|
|
19095
19104
|
ChartDirection["HORIZONTAL"] = "horizontal";
|
|
19096
19105
|
return ChartDirection;
|
|
19097
19106
|
}({});
|
|
19107
|
+
/** Legacy tooltip label keys. */
|
|
19098
19108
|
var TooltipLabel = /* @__PURE__ */ function(TooltipLabel) {
|
|
19099
19109
|
TooltipLabel["Y"] = "yLabel";
|
|
19100
19110
|
TooltipLabel["X"] = "xLabel";
|
|
19101
19111
|
return TooltipLabel;
|
|
19102
19112
|
}({});
|
|
19113
|
+
/** Alignment identifiers used by chart layout and legend options. */
|
|
19103
19114
|
var AlignOptions = /* @__PURE__ */ function(AlignOptions) {
|
|
19104
19115
|
AlignOptions["End"] = "end";
|
|
19105
19116
|
AlignOptions["Start"] = "start";
|
|
@@ -19108,10 +19119,12 @@ var AlignOptions = /* @__PURE__ */ function(AlignOptions) {
|
|
|
19108
19119
|
AlignOptions["Left"] = "left";
|
|
19109
19120
|
return AlignOptions;
|
|
19110
19121
|
}({});
|
|
19122
|
+
/** Legacy point classification identifiers. */
|
|
19111
19123
|
var PointType = /* @__PURE__ */ function(PointType) {
|
|
19112
19124
|
PointType["Casing"] = "casing";
|
|
19113
19125
|
return PointType;
|
|
19114
19126
|
}({});
|
|
19127
|
+
/** Annotation shape identifiers. */
|
|
19115
19128
|
var AnnotationType = /* @__PURE__ */ function(AnnotationType) {
|
|
19116
19129
|
AnnotationType["Box"] = "box";
|
|
19117
19130
|
AnnotationType["Ellipse"] = "ellipse";
|
|
@@ -19120,6 +19133,7 @@ var AnnotationType = /* @__PURE__ */ function(AnnotationType) {
|
|
|
19120
19133
|
AnnotationType["Label"] = "label";
|
|
19121
19134
|
return AnnotationType;
|
|
19122
19135
|
}({});
|
|
19136
|
+
/** Point marker shapes compatible with Chart.js. */
|
|
19123
19137
|
var PointStyle = /* @__PURE__ */ function(PointStyle) {
|
|
19124
19138
|
PointStyle["Circle"] = "circle";
|
|
19125
19139
|
PointStyle["Square"] = "rect";
|
|
@@ -19127,10 +19141,12 @@ var PointStyle = /* @__PURE__ */ function(PointStyle) {
|
|
|
19127
19141
|
PointStyle["Triangle"] = "triangle";
|
|
19128
19142
|
return PointStyle;
|
|
19129
19143
|
}({});
|
|
19144
|
+
/** Hover interaction modes used by the library. */
|
|
19130
19145
|
var ChartHoverMode = /* @__PURE__ */ function(ChartHoverMode) {
|
|
19131
19146
|
ChartHoverMode["Nearest"] = "nearest";
|
|
19132
19147
|
return ChartHoverMode;
|
|
19133
19148
|
}({});
|
|
19149
|
+
/** Interaction mode identifiers; availability depends on the chart controls. */
|
|
19134
19150
|
var PanZoomMode = /* @__PURE__ */ function(PanZoomMode) {
|
|
19135
19151
|
PanZoomMode["X"] = "x";
|
|
19136
19152
|
PanZoomMode["Y"] = "y";
|
|
@@ -19138,10 +19154,12 @@ var PanZoomMode = /* @__PURE__ */ function(PanZoomMode) {
|
|
|
19138
19154
|
PanZoomMode["Z"] = "z";
|
|
19139
19155
|
return PanZoomMode;
|
|
19140
19156
|
}({});
|
|
19157
|
+
/** Keyboard modifier identifiers used by chart interactions. */
|
|
19141
19158
|
var Key = /* @__PURE__ */ function(Key) {
|
|
19142
19159
|
Key["Shift"] = "Shift";
|
|
19143
19160
|
return Key;
|
|
19144
19161
|
}({});
|
|
19162
|
+
/** DOM event names used by chart interaction handlers. */
|
|
19145
19163
|
var Events = /* @__PURE__ */ function(Events) {
|
|
19146
19164
|
Events["Mousemove"] = "mousemove";
|
|
19147
19165
|
Events["Mouseout"] = "mouseout";
|
|
@@ -19236,6 +19254,7 @@ var LOGARITHMIC_STEPS = [
|
|
|
19236
19254
|
1e3,
|
|
19237
19255
|
1e4
|
|
19238
19256
|
];
|
|
19257
|
+
/** Default categorical DS colour palette. Treat the exported array as read-only. */
|
|
19239
19258
|
var COLORS = [
|
|
19240
19259
|
"#3366cc",
|
|
19241
19260
|
"#dc3912",
|
|
@@ -23290,16 +23309,19 @@ var calloutConnectorPlugin = {
|
|
|
23290
23309
|
};
|
|
23291
23310
|
//#endregion
|
|
23292
23311
|
//#region src/components/line-chart/plugins/line-markers-plugin/types.ts
|
|
23312
|
+
/** Left/right attachment side for line markers. */
|
|
23293
23313
|
var LineMarkerSide = /* @__PURE__ */ function(LineMarkerSide) {
|
|
23294
23314
|
LineMarkerSide["Left"] = "left";
|
|
23295
23315
|
LineMarkerSide["Right"] = "right";
|
|
23296
23316
|
return LineMarkerSide;
|
|
23297
23317
|
}({});
|
|
23318
|
+
/** Orientation of a line marker. */
|
|
23298
23319
|
var LineMarkerDirection = /* @__PURE__ */ function(LineMarkerDirection) {
|
|
23299
23320
|
LineMarkerDirection["Vertical"] = "vertical";
|
|
23300
23321
|
LineMarkerDirection["Horizontal"] = "horizontal";
|
|
23301
23322
|
return LineMarkerDirection;
|
|
23302
23323
|
}({});
|
|
23324
|
+
/** Label placement relative to a line marker. */
|
|
23303
23325
|
var LineMarkerLabelPosition = /* @__PURE__ */ function(LineMarkerLabelPosition) {
|
|
23304
23326
|
LineMarkerLabelPosition["Left"] = "left";
|
|
23305
23327
|
LineMarkerLabelPosition["Right"] = "right";
|
|
@@ -23308,6 +23330,7 @@ var LineMarkerLabelPosition = /* @__PURE__ */ function(LineMarkerLabelPosition)
|
|
|
23308
23330
|
LineMarkerLabelPosition["OnLine"] = "onLine";
|
|
23309
23331
|
return LineMarkerLabelPosition;
|
|
23310
23332
|
}({});
|
|
23333
|
+
/** Horizontal alignment of marker label text. */
|
|
23311
23334
|
var LineMarkerTextAlign = /* @__PURE__ */ function(LineMarkerTextAlign) {
|
|
23312
23335
|
LineMarkerTextAlign["Left"] = "left";
|
|
23313
23336
|
LineMarkerTextAlign["Right"] = "right";
|
|
@@ -24685,6 +24708,23 @@ var LineChart = (props) => {
|
|
|
24685
24708
|
})]
|
|
24686
24709
|
}, getChartKey(state, languageKey));
|
|
24687
24710
|
};
|
|
24711
|
+
/**
|
|
24712
|
+
* Renders an interactive Cartesian line chart with multiple axes, annotations and chart controls.
|
|
24713
|
+
*
|
|
24714
|
+
* Pass partial configuration through `chart`; omitted settings receive component defaults.
|
|
24715
|
+
* The default tooltip title uses Y when the first X axis is at the top, and X otherwise.
|
|
24716
|
+
* The other coordinate is displayed beside the DS name. Custom callbacks override those defaults.
|
|
24717
|
+
*
|
|
24718
|
+
* @param props - Chart configuration and optional header, subheader and table content.
|
|
24719
|
+
* @returns The chart canvas, legend and controls.
|
|
24720
|
+
* @example
|
|
24721
|
+
* ```tsx
|
|
24722
|
+
* <LineChart chart={{
|
|
24723
|
+
* data: { datasets: [{ label: 'DS A', data: [{ x: 10, y: 20 }] }] },
|
|
24724
|
+
* options: { tooltip: { scientificNotation: false } },
|
|
24725
|
+
* }} />
|
|
24726
|
+
* ```
|
|
24727
|
+
*/
|
|
24688
24728
|
var LineChartWithLegend = (props) => {
|
|
24689
24729
|
const { options, data: { datasets = [] } = {} } = getDefaultProps$3(props);
|
|
24690
24730
|
return /* @__PURE__ */ jsx(LegendProvider, {
|
|
@@ -24696,12 +24736,17 @@ var LineChartWithLegend = (props) => {
|
|
|
24696
24736
|
//#endregion
|
|
24697
24737
|
//#region src/components/line-chart/initialize/initialize-line-chart.ts
|
|
24698
24738
|
/**
|
|
24699
|
-
*
|
|
24700
|
-
*
|
|
24701
|
-
*
|
|
24702
|
-
*
|
|
24703
|
-
*
|
|
24704
|
-
*
|
|
24739
|
+
* Updates the shared chart configuration, including the language and translated control labels.
|
|
24740
|
+
*
|
|
24741
|
+
* Call during application setup before rendering charts. Configuration is shared across chart instances;
|
|
24742
|
+
* this is not a per-chart configuration API. Each call sets the language key (default `en`) and updates
|
|
24743
|
+
* the supplied configuration entries. Non-primitive entries other than translations are shallow-copied.
|
|
24744
|
+
*
|
|
24745
|
+
* @param options - Language key, translations and other shared configuration entries.
|
|
24746
|
+
* @example
|
|
24747
|
+
* ```ts
|
|
24748
|
+
* initializeLineChart({ languageKey: 'en' });
|
|
24749
|
+
* ```
|
|
24705
24750
|
*/
|
|
24706
24751
|
var initializeLineChart = ({ languageKey = "en", ...options }) => {
|
|
24707
24752
|
setConfig(INIT_KEYS.LANGUAGE_KEY, languageKey);
|
|
@@ -24931,11 +24976,6 @@ var usePieChartConfig = (chart) => {
|
|
|
24931
24976
|
//#endregion
|
|
24932
24977
|
//#region src/components/pie-chart/pie-chart.tsx
|
|
24933
24978
|
Chart$1.register(LinearScale, CategoryScale, LogarithmicScale, ArcElement, plugin_legend, plugin_tooltip, plugin_title, index, plugin$1, plugin);
|
|
24934
|
-
/**
|
|
24935
|
-
* this is a pie chart component
|
|
24936
|
-
* @param {props: IPieChartProps} IPieChartProps
|
|
24937
|
-
* ./pie-chart.interface
|
|
24938
|
-
*/
|
|
24939
24979
|
var PieChart = (props) => {
|
|
24940
24980
|
setDefaultTheme();
|
|
24941
24981
|
const chart = getDefaultProps$2(props);
|
|
@@ -24977,6 +25017,19 @@ var PieChart = (props) => {
|
|
|
24977
25017
|
})
|
|
24978
25018
|
});
|
|
24979
25019
|
};
|
|
25020
|
+
/**
|
|
25021
|
+
* Renders a pie chart with configurable legends, data labels and an optional inner cutout.
|
|
25022
|
+
*
|
|
25023
|
+
* @param props - Chart data and partial options. Set `chart.options.graph.cutout` for an inner opening.
|
|
25024
|
+
* @returns The chart canvas and legend.
|
|
25025
|
+
* @example
|
|
25026
|
+
* ```tsx
|
|
25027
|
+
* <PieChart chart={{
|
|
25028
|
+
* data: { labels: ['A', 'B'], datasets: [{ label: 'DS A', data: [10, 20] }] },
|
|
25029
|
+
* options: { graph: { cutout: '50%' } },
|
|
25030
|
+
* }} />
|
|
25031
|
+
* ```
|
|
25032
|
+
*/
|
|
24980
25033
|
var PieChartWithLegend = (props) => {
|
|
24981
25034
|
const { options } = getDefaultProps$2(props);
|
|
24982
25035
|
return /* @__PURE__ */ jsx(LegendProvider, {
|
|
@@ -39334,6 +39387,19 @@ var BarChart = (props) => {
|
|
|
39334
39387
|
})]
|
|
39335
39388
|
}, languageKey);
|
|
39336
39389
|
};
|
|
39390
|
+
/**
|
|
39391
|
+
* Renders a Cartesian bar chart with optional stacking, annotations and interactive controls.
|
|
39392
|
+
*
|
|
39393
|
+
* @param props - Chart data and partial options. `options.direction` selects vertical or horizontal bars.
|
|
39394
|
+
* @returns The chart canvas, legend and controls.
|
|
39395
|
+
* @example
|
|
39396
|
+
* ```tsx
|
|
39397
|
+
* <BarChart chart={{
|
|
39398
|
+
* data: { labels: ['A'], datasets: [{ label: 'DS A', data: [{ x: 'A', y: 10 }] }] },
|
|
39399
|
+
* options: { direction: 'vertical' },
|
|
39400
|
+
* }} />
|
|
39401
|
+
* ```
|
|
39402
|
+
*/
|
|
39337
39403
|
var BarChartWithLegend = (props) => {
|
|
39338
39404
|
const { options } = getDefaultProps$1(props);
|
|
39339
39405
|
return /* @__PURE__ */ jsx(LegendProvider, {
|
|
@@ -39732,6 +39798,18 @@ var ScatterChart = (props) => {
|
|
|
39732
39798
|
})
|
|
39733
39799
|
});
|
|
39734
39800
|
};
|
|
39801
|
+
/**
|
|
39802
|
+
* Renders Cartesian scatter points with optional annotations, data labels and a background gradient.
|
|
39803
|
+
*
|
|
39804
|
+
* @param props - Chart data and partial options; each point supplies X and Y coordinates.
|
|
39805
|
+
* @returns The chart canvas and legend.
|
|
39806
|
+
* @example
|
|
39807
|
+
* ```tsx
|
|
39808
|
+
* <ScatterChart chart={{
|
|
39809
|
+
* data: { datasets: [{ label: 'DS A', data: [{ x: 10, y: 20 }, { x: 20, y: 30 }] }] },
|
|
39810
|
+
* }} />
|
|
39811
|
+
* ```
|
|
39812
|
+
*/
|
|
39735
39813
|
var ScatterChartWithLegend = (props) => {
|
|
39736
39814
|
const { options } = getDefaultProps(props);
|
|
39737
39815
|
return /* @__PURE__ */ jsx(LegendProvider, {
|
|
@@ -39743,6 +39821,17 @@ var ScatterChartWithLegend = (props) => {
|
|
|
39743
39821
|
//#region src/components/common/helpers/get-grouped-color-scheme/get-grouped-color-scheme.ts
|
|
39744
39822
|
extend([lchPlugin]);
|
|
39745
39823
|
var MIN_LIGHTNESS = 15;
|
|
39824
|
+
/**
|
|
39825
|
+
* Builds a darkest-first palette by varying LCH lightness while retaining the starting hue and chroma.
|
|
39826
|
+
*
|
|
39827
|
+
* @param length - Requested number of colours. Use a non-negative integer; zero returns an empty array.
|
|
39828
|
+
* @param startingColor - Colour understood by colord. A length of one returns this string unchanged.
|
|
39829
|
+
* @returns CSS LCH colour strings, except for the unchanged single-colour case.
|
|
39830
|
+
* @example
|
|
39831
|
+
* ```ts
|
|
39832
|
+
* const colors = getGroupedColorScheme(3, '#3366cc');
|
|
39833
|
+
* ```
|
|
39834
|
+
*/
|
|
39746
39835
|
var getGroupedColorScheme = (length, startingColor) => {
|
|
39747
39836
|
if (length === 1) return [startingColor];
|
|
39748
39837
|
const { h: hue, c: chroma } = colord(startingColor).toLch();
|
package/package.json
CHANGED