@oliasoft-open-source/charts-library 5.0.2 → 5.0.3-beta-2
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/assets/{Color-YHDXOIA2-DvkV04os.js → Color-YHDXOIA2-DdP7eK5i.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-cMkmi-tX.js → DocsRenderer-CFRXHY34-D5tFcMOW.js} +3 -3
- package/dist/assets/{bar-chart.stories-Eq_jQ19D.js → bar-chart.stories-BMExUqt4.js} +1 -1
- package/dist/assets/{entry-preview-Cgd6khWs.js → entry-preview-FiUJlA3m.js} +1 -1
- package/dist/assets/{get-draggableData-CQpLHCdg.js → get-draggableData-DS0HhINp.js} +1 -1
- package/dist/assets/{iframe-Bj1sRZW3.js → iframe-uMLayeIE.js} +2 -2
- package/dist/assets/{legend-krJw8Ykb.js → legend-CD8XU7nW.js} +1 -1
- package/dist/assets/line-chart-CO0E8gEH.js +1 -0
- package/dist/assets/line-chart.stories-DeZuwimt.js +1155 -0
- package/dist/assets/line-chart.test-case.stories-1ubn_r6M.js +428 -0
- package/dist/assets/{preview-BNebtty_.js → preview-C-6F1PUr.js} +2 -2
- package/dist/assets/{preview-CASZ8WNA.js → preview-CvzUewvo.js} +1 -1
- package/dist/assets/{scatter-chart.stories-BCbRBdJY.js → scatter-chart.stories-sl5FPoGH.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/index.js.js +63 -34
- package/dist/index.js.js.map +1 -1
- package/dist/index.json +1 -1
- package/dist/line-chart/controls/axes-options/axes-options-interfaces.d.ts +1 -0
- package/dist/line-chart/hooks/use-chart-functions.d.ts +2 -1
- package/dist/line-chart/state/action-types.d.ts +1 -0
- package/dist/line-chart/state/state.interfaces.d.ts +1 -0
- package/dist/project.json +1 -1
- package/dist/src/components/line-chart/controls/axes-options/axes-options-interfaces.d.ts +1 -0
- package/dist/src/components/line-chart/hooks/use-chart-functions.d.ts +1 -0
- package/dist/src/components/line-chart/state/action-types.d.ts +1 -0
- package/dist/src/components/line-chart/state/state.interfaces.d.ts +1 -0
- package/package.json +1 -1
- package/dist/assets/line-chart-TEIxShHM.js +0 -1
- package/dist/assets/line-chart.stories-CRpxf_tv.js +0 -1130
- package/dist/assets/line-chart.test-case.stories-Cb2jns7e.js +0 -142
package/dist/index.js.js
CHANGED
|
@@ -22803,6 +22803,7 @@ const UPDATE_AXES_RANGES = "UPDATE_AXES_RANGES";
|
|
|
22803
22803
|
const TOGGLE_DRAG_POINTS = "TOGGLE_DRAG_POINTS";
|
|
22804
22804
|
const TOGGLE_DRAG_ANNOTATION = "TOGGLE_DRAG_ANNOTATION";
|
|
22805
22805
|
const DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";
|
|
22806
|
+
const UPDATE_EDITED = "UPDATE_EDITED";
|
|
22806
22807
|
const reducer = (state, action) => {
|
|
22807
22808
|
return produce(state, (draft) => {
|
|
22808
22809
|
switch (action.type) {
|
|
@@ -22890,6 +22891,10 @@ const reducer = (state, action) => {
|
|
|
22890
22891
|
}
|
|
22891
22892
|
break;
|
|
22892
22893
|
}
|
|
22894
|
+
case UPDATE_EDITED: {
|
|
22895
|
+
draft.edited = action.payload;
|
|
22896
|
+
break;
|
|
22897
|
+
}
|
|
22893
22898
|
}
|
|
22894
22899
|
});
|
|
22895
22900
|
};
|
|
@@ -22964,7 +22969,8 @@ const initialState = ({ options, persistenceId }) => {
|
|
|
22964
22969
|
axes: [],
|
|
22965
22970
|
showTable: false,
|
|
22966
22971
|
enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
|
|
22967
|
-
enableDragAnnotation: enableDragAnnotation ?? enableDragAnnotationStorage
|
|
22972
|
+
enableDragAnnotation: enableDragAnnotation ?? enableDragAnnotationStorage,
|
|
22973
|
+
edited: false
|
|
22968
22974
|
};
|
|
22969
22975
|
};
|
|
22970
22976
|
const ControlsPortal = ({
|
|
@@ -23291,7 +23297,7 @@ const useToggleHandlers = (dispatch) => {
|
|
|
23291
23297
|
},
|
|
23292
23298
|
[dispatch]
|
|
23293
23299
|
);
|
|
23294
|
-
|
|
23300
|
+
return {
|
|
23295
23301
|
onToggleLegend: createToggleHandler(TOGGLE_LEGEND),
|
|
23296
23302
|
onToggleLine: createToggleHandler(TOGGLE_LINE),
|
|
23297
23303
|
onTogglePan: createToggleHandler(TOGGLE_PAN),
|
|
@@ -23302,7 +23308,6 @@ const useToggleHandlers = (dispatch) => {
|
|
|
23302
23308
|
onToggleDragAnnotation: createToggleHandler(TOGGLE_DRAG_ANNOTATION),
|
|
23303
23309
|
onDisableDragOptions: createToggleHandler(DISABLE_DRAG_OPTIONS)
|
|
23304
23310
|
};
|
|
23305
|
-
return toggleHandlers;
|
|
23306
23311
|
};
|
|
23307
23312
|
function resolveUrl(url, baseUrl) {
|
|
23308
23313
|
if (url.match(/^[a-z]+:\/\//i)) {
|
|
@@ -24329,11 +24334,15 @@ const useChartFunctions = ({
|
|
|
24329
24334
|
axes
|
|
24330
24335
|
} = options;
|
|
24331
24336
|
const resetZoom2 = useCallback(() => {
|
|
24337
|
+
var _a2, _b2;
|
|
24332
24338
|
const chartInstance = chartRef == null ? void 0 : chartRef.current;
|
|
24333
|
-
chartInstance == null ? void 0 :
|
|
24334
|
-
|
|
24335
|
-
|
|
24336
|
-
|
|
24339
|
+
if (chartInstance && (state == null ? void 0 : state.edited)) {
|
|
24340
|
+
(_a2 = chartInstance == null ? void 0 : chartInstance.resetZoom) == null ? void 0 : _a2.call(chartInstance);
|
|
24341
|
+
(_b2 = chartInstance == null ? void 0 : chartInstance.reset) == null ? void 0 : _b2.call(chartInstance);
|
|
24342
|
+
dispatch({ type: RESET_AXES_RANGES, payload: { axes: [] } });
|
|
24343
|
+
dispatch({ type: UPDATE_EDITED, payload: false });
|
|
24344
|
+
}
|
|
24345
|
+
}, [chartRef == null ? void 0 : chartRef.current, dispatch, state]);
|
|
24337
24346
|
const onHover = useCallback(
|
|
24338
24347
|
(hoveredPoint, setHoveredPoint, datasets) => {
|
|
24339
24348
|
return (evt, hoveredItems) => {
|
|
@@ -24433,14 +24442,24 @@ const useChartFunctions = ({
|
|
|
24433
24442
|
});
|
|
24434
24443
|
}, [axes]);
|
|
24435
24444
|
const onResetAxes = useCallback(() => {
|
|
24445
|
+
var _a2, _b2;
|
|
24436
24446
|
const chartInstance = chartRef == null ? void 0 : chartRef.current;
|
|
24437
|
-
chartInstance
|
|
24438
|
-
|
|
24439
|
-
|
|
24447
|
+
if (chartInstance && state.edited) {
|
|
24448
|
+
(_a2 = chartInstance == null ? void 0 : chartInstance.resetZoom) == null ? void 0 : _a2.call(chartInstance);
|
|
24449
|
+
(_b2 = chartInstance == null ? void 0 : chartInstance.reset) == null ? void 0 : _b2.call(chartInstance);
|
|
24450
|
+
dispatch({ type: RESET_AXES_RANGES, payload: { axes: [] } });
|
|
24451
|
+
dispatch({ type: UPDATE_EDITED, payload: false });
|
|
24452
|
+
}
|
|
24440
24453
|
}, [chartRef == null ? void 0 : chartRef.current]);
|
|
24441
24454
|
const onUpdateAxes = useCallback(({ axes: axes2 }) => {
|
|
24442
24455
|
dispatch({ type: UPDATE_AXES_RANGES, payload: { axes: axes2 } });
|
|
24443
24456
|
}, []);
|
|
24457
|
+
const onUpdateEdited = useCallback(
|
|
24458
|
+
(edited) => {
|
|
24459
|
+
dispatch({ type: UPDATE_EDITED, payload: edited });
|
|
24460
|
+
},
|
|
24461
|
+
[state]
|
|
24462
|
+
);
|
|
24444
24463
|
return {
|
|
24445
24464
|
resetZoom: resetZoom2,
|
|
24446
24465
|
onHover,
|
|
@@ -24450,7 +24469,8 @@ const useChartFunctions = ({
|
|
|
24450
24469
|
controlsAxesLabels: getControlsAxesLabels(axes),
|
|
24451
24470
|
updateAxesRangesFromChart,
|
|
24452
24471
|
onResetAxes,
|
|
24453
|
-
onUpdateAxes
|
|
24472
|
+
onUpdateAxes,
|
|
24473
|
+
onUpdateEdited
|
|
24454
24474
|
};
|
|
24455
24475
|
};
|
|
24456
24476
|
const createErrorMessages = (value, compareTo, type) => {
|
|
@@ -24504,6 +24524,7 @@ const AxesOptionsPopover = (optionsPopover) => {
|
|
|
24504
24524
|
controlsAxesLabels,
|
|
24505
24525
|
onUpdateAxes,
|
|
24506
24526
|
onResetAxes,
|
|
24527
|
+
onUpdateEdited,
|
|
24507
24528
|
depthType,
|
|
24508
24529
|
translations,
|
|
24509
24530
|
close,
|
|
@@ -24512,7 +24533,7 @@ const AxesOptionsPopover = (optionsPopover) => {
|
|
|
24512
24533
|
const [formState, setFormState] = useState({
|
|
24513
24534
|
localAxes: getInitAxes({ chartRef, state }),
|
|
24514
24535
|
depthType: depthType == null ? void 0 : depthType.selectedDepthType,
|
|
24515
|
-
edited:
|
|
24536
|
+
edited: state.edited
|
|
24516
24537
|
});
|
|
24517
24538
|
const { errors, valid } = validateAxes(formState.localAxes);
|
|
24518
24539
|
const onEditValue = ({ name, value, id }) => {
|
|
@@ -24548,6 +24569,7 @@ const AxesOptionsPopover = (optionsPopover) => {
|
|
|
24548
24569
|
if (depthType && (depthType == null ? void 0 : depthType.setSelectedDepthType)) {
|
|
24549
24570
|
depthType == null ? void 0 : depthType.setSelectedDepthType(formState.depthType);
|
|
24550
24571
|
}
|
|
24572
|
+
onUpdateEdited(formState.edited);
|
|
24551
24573
|
};
|
|
24552
24574
|
const onReset = () => {
|
|
24553
24575
|
setFormState({
|
|
@@ -24556,6 +24578,7 @@ const AxesOptionsPopover = (optionsPopover) => {
|
|
|
24556
24578
|
edited: false
|
|
24557
24579
|
});
|
|
24558
24580
|
onResetAxes();
|
|
24581
|
+
onUpdateEdited(false);
|
|
24559
24582
|
close == null ? void 0 : close();
|
|
24560
24583
|
};
|
|
24561
24584
|
const handleInputFocus = (e2) => e2.target.select();
|
|
@@ -24624,11 +24647,13 @@ const AxesOptionsPopover = (optionsPopover) => {
|
|
|
24624
24647
|
key: i2,
|
|
24625
24648
|
label: depth
|
|
24626
24649
|
})),
|
|
24627
|
-
onSelected: (key) =>
|
|
24628
|
-
|
|
24629
|
-
|
|
24630
|
-
|
|
24631
|
-
|
|
24650
|
+
onSelected: (key) => {
|
|
24651
|
+
setFormState((prevState) => ({
|
|
24652
|
+
...prevState,
|
|
24653
|
+
depthType: depthType.options[key],
|
|
24654
|
+
edited: true
|
|
24655
|
+
}));
|
|
24656
|
+
},
|
|
24632
24657
|
small: true,
|
|
24633
24658
|
value: depthType.options.indexOf(formState.depthType)
|
|
24634
24659
|
}
|
|
@@ -24710,7 +24735,13 @@ const Controls = ({
|
|
|
24710
24735
|
onToggleDragAnnotation,
|
|
24711
24736
|
onDisableDragOptions
|
|
24712
24737
|
} = useToggleHandlers(dispatch);
|
|
24713
|
-
const {
|
|
24738
|
+
const {
|
|
24739
|
+
handleDownload,
|
|
24740
|
+
controlsAxesLabels,
|
|
24741
|
+
onResetAxes,
|
|
24742
|
+
onUpdateAxes,
|
|
24743
|
+
onUpdateEdited
|
|
24744
|
+
} = useChartFunctions({
|
|
24714
24745
|
chartRef,
|
|
24715
24746
|
state,
|
|
24716
24747
|
options,
|
|
@@ -24771,6 +24802,7 @@ const Controls = ({
|
|
|
24771
24802
|
controlsAxesLabels,
|
|
24772
24803
|
onUpdateAxes,
|
|
24773
24804
|
onResetAxes,
|
|
24805
|
+
onUpdateEdited,
|
|
24774
24806
|
depthType,
|
|
24775
24807
|
translations
|
|
24776
24808
|
}
|
|
@@ -25080,19 +25112,20 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
|
|
|
25080
25112
|
} = line ?? {};
|
|
25081
25113
|
const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
|
|
25082
25114
|
const { lineTension, spanGaps } = graph ?? {};
|
|
25083
|
-
|
|
25115
|
+
const rawData = Array.isArray(data) ? data : [];
|
|
25116
|
+
if (formation && (rawData == null ? void 0 : rawData.length)) {
|
|
25084
25117
|
const axesMin = Number((_a2 = axes[0]) == null ? void 0 : _a2.min);
|
|
25085
25118
|
const axesMax = Number((_b2 = axes[0]) == null ? void 0 : _b2.max);
|
|
25086
|
-
const [startPoint, endPoint] =
|
|
25119
|
+
const [startPoint, endPoint] = rawData;
|
|
25087
25120
|
if (axesMin && (startPoint == null ? void 0 : startPoint.x)) {
|
|
25088
|
-
|
|
25121
|
+
rawData[0].x = Math.max(axesMin, startPoint.x);
|
|
25089
25122
|
}
|
|
25090
25123
|
if (axesMax && (endPoint == null ? void 0 : endPoint.x)) {
|
|
25091
|
-
|
|
25124
|
+
rawData[2].x = Math.min(axesMax, endPoint.x);
|
|
25092
25125
|
}
|
|
25093
25126
|
}
|
|
25094
25127
|
const hasCustomOpt = checkCustomOption(line, CUSTOM_OPTION);
|
|
25095
|
-
const filteredData =
|
|
25128
|
+
const filteredData = (rawData == null ? void 0 : rawData.filter(Boolean)) || [];
|
|
25096
25129
|
const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
|
|
25097
25130
|
let pointState, lineState;
|
|
25098
25131
|
if (customShowPoints !== void 0) {
|
|
@@ -25415,7 +25448,7 @@ const getAlignmentData = (context) => {
|
|
|
25415
25448
|
const { chart: chart2, dataIndex = 0, datasetIndex = 0 } = context;
|
|
25416
25449
|
const { chartArea } = chart2;
|
|
25417
25450
|
const { left: left2 = null, right: right2 = null, bottom: bottom2 = null } = chartArea;
|
|
25418
|
-
const meta = chart2.getDatasetMeta(datasetIndex);
|
|
25451
|
+
const meta = chart2 == null ? void 0 : chart2.getDatasetMeta(datasetIndex);
|
|
25419
25452
|
const { x: x2 = null, y: y2 = null } = ((_a2 = meta == null ? void 0 : meta.data) == null ? void 0 : _a2[dataIndex]) || {};
|
|
25420
25453
|
return {
|
|
25421
25454
|
x: x2,
|
|
@@ -25937,7 +25970,7 @@ const useChartOptions = ({
|
|
|
25937
25970
|
const [hoveredPoint, setHoveredPoint] = useState(
|
|
25938
25971
|
null
|
|
25939
25972
|
);
|
|
25940
|
-
const { updateAxesRangesFromChart, onHover } = useChartFunctions({
|
|
25973
|
+
const { updateAxesRangesFromChart, onHover, onUpdateEdited } = useChartFunctions({
|
|
25941
25974
|
chartRef,
|
|
25942
25975
|
state,
|
|
25943
25976
|
options,
|
|
@@ -25963,6 +25996,7 @@ const useChartOptions = ({
|
|
|
25963
25996
|
mode: PanZoomMode.XY,
|
|
25964
25997
|
onPanComplete() {
|
|
25965
25998
|
updateAxesRangesFromChart();
|
|
25999
|
+
onUpdateEdited(true);
|
|
25966
26000
|
}
|
|
25967
26001
|
}),
|
|
25968
26002
|
[panEnabled]
|
|
@@ -25979,6 +26013,7 @@ const useChartOptions = ({
|
|
|
25979
26013
|
},
|
|
25980
26014
|
onZoomComplete() {
|
|
25981
26015
|
updateAxesRangesFromChart();
|
|
26016
|
+
onUpdateEdited(true);
|
|
25982
26017
|
}
|
|
25983
26018
|
}),
|
|
25984
26019
|
[zoomEnabled]
|
|
@@ -26044,21 +26079,15 @@ const useChartOptions = ({
|
|
|
26044
26079
|
};
|
|
26045
26080
|
const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
|
|
26046
26081
|
const { graph, legend: legend2 } = options;
|
|
26047
|
-
const debouncedResetZoom = useCallback(
|
|
26048
|
-
debounce$3(() => {
|
|
26049
|
-
resetZoom2();
|
|
26050
|
-
}, 100),
|
|
26051
|
-
// 100ms debounce delay
|
|
26052
|
-
[resetZoom2]
|
|
26053
|
-
);
|
|
26054
26082
|
const handleDoubleClick = useCallback(
|
|
26055
26083
|
(_2, args) => {
|
|
26056
26084
|
const { event } = args;
|
|
26057
26085
|
if (event.type === DOUBLE_CLICK) {
|
|
26058
|
-
|
|
26086
|
+
resetZoom2();
|
|
26087
|
+
return false;
|
|
26059
26088
|
}
|
|
26060
26089
|
},
|
|
26061
|
-
[
|
|
26090
|
+
[resetZoom2]
|
|
26062
26091
|
);
|
|
26063
26092
|
return useMemo(() => {
|
|
26064
26093
|
return [
|