diff --git a/packages/core/src/store/chart/chartSlice.ts b/packages/core/src/store/chart/chartSlice.ts index 485e6015..4e8d2e5c 100644 --- a/packages/core/src/store/chart/chartSlice.ts +++ b/packages/core/src/store/chart/chartSlice.ts @@ -154,12 +154,14 @@ const chartSlice = createSlice({ * @param action.payload.domain The new domain for the scale */ setScaleZoom: (state: IChartState, action: PayloadAction<{ field: string, domain: number[] | Date[] }>) => { - state.scales[action.payload.field] = state.scales[action.payload.field] ?? { - scale: undefined, - domain: undefined, - zoomedDomain: undefined, - range: undefined, - }; + if (!state.scales[action.payload.field]) { + state.scales[action.payload.field] = { + scale: undefined, + domain: undefined, + zoomedDomain: undefined, + range: undefined, + }; + } state.scales[action.payload.field].zoomedDomain = action.payload.domain; }, diff --git a/packages/core/src/store/chart/tests/__snapshots__/chartActions.unit.ts.snap b/packages/core/src/store/chart/tests/__snapshots__/chartActions.unit.ts.snap deleted file mode 100644 index 2cfad929..00000000 --- a/packages/core/src/store/chart/tests/__snapshots__/chartActions.unit.ts.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`chartActions setBrushDimensions warns with invalid margin 1`] = `"@chart-io encountered an warning. W005: The top of the margin was not specified and is required. You can read more about this https://ipwright83.github.io/chart-io/?path=/docs/errors-warnings-warnings-W005."`; - -exports[`chartActions setDimensions warns with invalid margin 1`] = `"@chart-io encountered an warning. W005: The top of the margin was not specified and is required. You can read more about this https://ipwright83.github.io/chart-io/?path=/docs/errors-warnings-warnings-W005."`; - -exports[`chartActions setDimensions warns with no margin 1`] = `"@chart-io encountered an warning. W004: A margin was not provided but is required. You can read more about this https://ipwright83.github.io/chart-io/?path=/docs/errors-warnings-warnings-W004."`; diff --git a/packages/core/src/store/chart/tests/chartSlice.unit.ts b/packages/core/src/store/chart/tests/chartSlice.unit.ts index ddfd5afe..e9e00057 100644 --- a/packages/core/src/store/chart/tests/chartSlice.unit.ts +++ b/packages/core/src/store/chart/tests/chartSlice.unit.ts @@ -72,17 +72,9 @@ describe("chartSlice.reducer", () => { range: [0, 100], }); - expect(chartSlice.reducer(previousState, action)).toEqual({ - ...previousState, - scales: { - ...previousState.scales, - a: { - ...previousState.scales.a, - brush: { - range: [0, 100], - }, - }, - }, + const state = chartSlice.reducer(previousState, action); + expect(state.scales["a"].brush).toEqual({ + range: [0, 100], }); }); @@ -92,16 +84,8 @@ describe("chartSlice.reducer", () => { domain: [3, 7], }); - expect(chartSlice.reducer(previousState, action)).toEqual({ - ...previousState, - scales: { - ...previousState.scales, - a: { - ...previousState.scales.a, - zoomedDomain: [3, 7], - }, - }, - }); + const state = chartSlice.reducer(previousState, action); + expect(state.scales["a"].zoomedDomain).toEqual([3, 7]); }); it("setBrushDimensions()", () => { diff --git a/packages/core/src/utils/linkStores.ts b/packages/core/src/utils/linkStores.ts index 5b1db4e4..a55357fc 100644 --- a/packages/core/src/utils/linkStores.ts +++ b/packages/core/src/utils/linkStores.ts @@ -7,7 +7,7 @@ import { logAndThrowError } from "./logger"; * @param stores The set of stores to link * @param actionFilter A regex to match against redux actions */ -export function linkStores(stores: Store[] = [], actionFilter = /EVENT\.MOUSE*/) { +export function linkStores(stores: Store[] = [], actionFilter = /event\/mouse*/) { // Grab the dispatch function for each store const dispatches = []; diff --git a/packages/core/src/utils/utils.unit.ts b/packages/core/src/utils/utils.unit.ts index 22f2ce17..c8fd2868 100644 --- a/packages/core/src/utils/utils.unit.ts +++ b/packages/core/src/utils/utils.unit.ts @@ -111,7 +111,7 @@ describe("utils", () => { linkStores([store1, store2, store3]); - const action = { type: "EVENT.MOUSE_MOVE" }; + const action = { type: "event/mouseMove" }; store1.dispatch(action); expect(dispatch1).toHaveBeenCalledWith(action); @@ -130,7 +130,7 @@ describe("utils", () => { linkStores([store1, store2, store3]); - const action = { type: "EVENT.MOUSE_MOVE" }; + const action = { type: "event/mouseMove" }; store2.dispatch(action); expect(dispatch1).toHaveBeenCalledWith(action); @@ -149,7 +149,7 @@ describe("utils", () => { linkStores([store1, store2, store3], /FOO_EVENTS/); - const action = { type: "EVENT.MOUSE_MOVE" }; + const action = { type: "event/mouseMove" }; store1.dispatch(action); expect(dispatch1).toHaveBeenCalledWith(action); diff --git a/packages/react/src/lib/components/EventReceiver/EventReceiver.unit.tsx b/packages/react/src/lib/components/EventReceiver/EventReceiver.unit.tsx index da2bf6f3..7029e59d 100644 --- a/packages/react/src/lib/components/EventReceiver/EventReceiver.unit.tsx +++ b/packages/react/src/lib/components/EventReceiver/EventReceiver.unit.tsx @@ -1,8 +1,8 @@ import { MOUSE_MOVE_THROTTLE } from "@chart-io/core"; import { fireEvent, render } from "@testing-library/react"; -import { Provider } from "react-redux"; import React from "react"; +import { Provider } from "react-redux"; import { createMockStore, FakeMouseEvent, wait } from "../../testUtils"; @@ -51,7 +51,7 @@ describe("EventReceiver", () => { await wait(2 * MOUSE_MOVE_THROTTLE); const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); - expect(dispatchCalls).toEqual(["EVENT.MOUSE_ENTER", "EVENT.MOUSE_MOVE", "EVENT.MOUSE_EXIT"]); + expect(dispatchCalls).toEqual(["event/mouseEnter", "event/mouseMove", "event/mouseExit"]); }); it("should skip if there is no layer avaliable", () => { diff --git a/packages/react/src/lib/components/Plots/Area/Area/Area.unit.tsx b/packages/react/src/lib/components/Plots/Area/Area/Area.unit.tsx index 9a070f40..d049d7f4 100644 --- a/packages/react/src/lib/components/Plots/Area/Area/Area.unit.tsx +++ b/packages/react/src/lib/components/Plots/Area/Area/Area.unit.tsx @@ -1,10 +1,10 @@ +import { chartActions, createStore, eventActions } from "@chart-io/core"; import * as d3 from "@chart-io/d3"; -import { createStore } from "@chart-io/core"; import { act, render } from "@testing-library/react"; -import { Provider } from "react-redux"; -import React from "react"; import { toMatchImageSnapshot } from "jest-image-snapshot"; +import React from "react"; +import { Provider } from "react-redux"; import { VIRTUAL_CANVAS_DEBOUNCE, VirtualCanvas } from "../../../VirtualCanvas"; import { Area } from "./Area"; @@ -80,10 +80,14 @@ describe("Area", () => { await wait(10); act(() => { - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } }); - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y"], scale: scales.y } }); - store.dispatch({ type: "CHART.SET_DATA", payload: data }); - store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } }); + store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x })); + store.dispatch(chartActions.setScales({ fields: ["y"], scale: scales.y })); + store.dispatch(chartActions.setChartData(data)); + store.dispatch(chartActions.setDimensions({ + width: 200, + height: 200, + margin: { top: 0, left: 0, right: 0, bottom: 0 } + })); }); // Spy on the store for the updates from the Area chart @@ -92,20 +96,20 @@ describe("Area", () => { // Simulate a mouse move on the background act(() => { - store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } }); + store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 })); }); await wait(1); const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "EVENT.MOUSE_ENTER", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "event/mouseEnter", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", ]); }); }); @@ -155,10 +159,14 @@ describe("Area", () => { await wait(10); act(() => { - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } }); - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y"], scale: scales.y } }); - store.dispatch({ type: "CHART.SET_DATA", payload: data }); - store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } }); + store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x })); + store.dispatch(chartActions.setScales({ fields: ["y"], scale: scales.y })); + store.dispatch(chartActions.setChartData(data)); + store.dispatch(chartActions.setDimensions({ + width: 200, + height: 200, + margin: { top: 0, left: 0, bottom: 0, right: 0 }, + })); }); // Spy on the store for the updates from the Area chart @@ -167,20 +175,20 @@ describe("Area", () => { // Simulate a mouse move on the background act(() => { - store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } }); + store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 })); }); await wait(1); const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "EVENT.MOUSE_ENTER", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "event/mouseEnter", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", ]); }); }); diff --git a/packages/react/src/lib/components/Plots/Area/Area/AreaBase.tsx b/packages/react/src/lib/components/Plots/Area/Area/AreaBase.tsx index 72bb61d5..4499bb26 100644 --- a/packages/react/src/lib/components/Plots/Area/Area/AreaBase.tsx +++ b/packages/react/src/lib/components/Plots/Area/Area/AreaBase.tsx @@ -1,7 +1,8 @@ -import * as d3 from "@chart-io/d3"; import { area, chartSelectors, IState } from "@chart-io/core"; - +import * as d3 from "@chart-io/d3"; import type { IPlotProps } from "@chart-io/types"; + +import { useMemo } from "react"; import { useSelector } from "react-redux"; import { useLegendItem, useRender } from "../../../../hooks"; @@ -40,7 +41,8 @@ export function AreaBase({ const width = useSelector((s: IState) => chartSelectors.dimensions.width(s)); const height = useSelector((s: IState) => chartSelectors.dimensions.height(s)); const animationDuration = useSelector((s: IState) => chartSelectors.animationDuration(s)); - const sortedData = data.sort((a, b) => d3.ascending(a[x], b[x])); + + const sortedData = useMemo(() => data.toSorted((a, b) => d3.ascending(a[x], b[x])), [data, x]); const fillColor = d3.color(`${color ?? theme.series.colors[0]}`); fillColor.opacity = theme.series.opacity; diff --git a/packages/react/src/lib/components/Plots/Area/StackedArea/StackedArea.unit.tsx b/packages/react/src/lib/components/Plots/Area/StackedArea/StackedArea.unit.tsx index aeb2e49d..2638b0e6 100644 --- a/packages/react/src/lib/components/Plots/Area/StackedArea/StackedArea.unit.tsx +++ b/packages/react/src/lib/components/Plots/Area/StackedArea/StackedArea.unit.tsx @@ -1,10 +1,10 @@ +import { chartActions, createStore, eventActions } from "@chart-io/core"; import * as d3 from "@chart-io/d3"; -import { createStore } from "@chart-io/core"; import { act, render } from "@testing-library/react"; -import { Provider } from "react-redux"; -import React from "react"; import { toMatchImageSnapshot } from "jest-image-snapshot"; +import React from "react"; +import { Provider } from "react-redux"; import { actionsIncludes, getBuffer, renderChart, wait } from "../../../../testUtils"; import { VIRTUAL_CANVAS_DEBOUNCE, VirtualCanvas } from "../../../VirtualCanvas"; @@ -75,10 +75,14 @@ describe("StackedArea", () => { await wait(1); act(() => { - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } }); - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y", "y2"], scale: scales.y } }); - store.dispatch({ type: "CHART.SET_DATA", payload: data }); - store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } }); + store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x })); + store.dispatch(chartActions.setScales({ fields: ["y", "y2"], scale: scales.y })); + store.dispatch(chartActions.setChartData(data)); + store.dispatch(chartActions.setDimensions({ + width: 200, + height: 200, + margin: { top: 0, left: 0, bottom: 0, right: 0 }, + })); }); // Spy on the store for the updates from the Area chart @@ -87,24 +91,24 @@ describe("StackedArea", () => { // Simulate a mouse move on the background act(() => { - store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } }); + store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 })); }); await wait(1); const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "EVENT.MOUSE_ENTER", - "EVENT.ADD_MARKER", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "event/mouseEnter", + "event/addMarker", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/addDropline", + "event/addDropline", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", ]); }); }); @@ -145,10 +149,14 @@ describe("StackedArea", () => { await wait(1); act(() => { - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } }); - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y", "y2"], scale: scales.y } }); - store.dispatch({ type: "CHART.SET_DATA", payload: data }); - store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } }); + store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x })); + store.dispatch(chartActions.setScales({ fields: ["y", "y2"], scale: scales.y })); + store.dispatch(chartActions.setChartData(data)); + store.dispatch(chartActions.setDimensions({ + width: 200, + height: 200, + margin: { top: 0, left: 0, bottom: 0, right: 0 }, + })); }); // Spy on the store for the updates from the Area chart @@ -157,24 +165,24 @@ describe("StackedArea", () => { // Simulate a mouse move on the background act(() => { - store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } }); + store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 })); }); await wait(1); const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "EVENT.MOUSE_ENTER", - "EVENT.ADD_MARKER", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "event/mouseEnter", + "event/addMarker", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/addDropline", + "event/addDropline", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", ]); }); }); diff --git a/packages/react/src/lib/components/Plots/Area/StackedArea/StackedAreaBase.tsx b/packages/react/src/lib/components/Plots/Area/StackedArea/StackedAreaBase.tsx index 60ccf2c4..a6806322 100644 --- a/packages/react/src/lib/components/Plots/Area/StackedArea/StackedAreaBase.tsx +++ b/packages/react/src/lib/components/Plots/Area/StackedArea/StackedAreaBase.tsx @@ -1,7 +1,8 @@ -import * as d3 from "@chart-io/d3"; import { area, chartSelectors, IState } from "@chart-io/core"; +import * as d3 from "@chart-io/d3"; import type { IColor, IEventPlotProps } from "@chart-io/types"; +import { useMemo } from "react"; import { useSelector } from "react-redux"; import { useLegendItems, useRender } from "../../../../hooks"; @@ -45,7 +46,7 @@ export function StackedAreaBase({ const theme = useSelector((s: IState) => chartSelectors.theme(s)); const animationDuration = useSelector((s: IState) => chartSelectors.animationDuration(s)); - const sortedData = data.sort((a, b) => d3.ascending(a[x], b[x])); + const sortedData = useMemo(() => data.toSorted((a, b) => d3.ascending(a[x], b[x])), [data, x]); // Used to create our initial path useMultiPathCreator(layer, x, ys, xScale, yScale, canvas); diff --git a/packages/react/src/lib/components/Plots/Bar/Bar/Bar.unit.tsx b/packages/react/src/lib/components/Plots/Bar/Bar/Bar.unit.tsx index d9a64c2c..b888ce68 100644 --- a/packages/react/src/lib/components/Plots/Bar/Bar/Bar.unit.tsx +++ b/packages/react/src/lib/components/Plots/Bar/Bar/Bar.unit.tsx @@ -60,12 +60,12 @@ describe("Bar", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -84,17 +84,17 @@ describe("Bar", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", // Mouseexit - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); @@ -182,13 +182,13 @@ describe("Bar", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -226,21 +226,21 @@ describe("Bar", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", // Mouseover - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", // Mouseexit - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); diff --git a/packages/react/src/lib/components/Plots/Bar/GroupedBar/GroupedBar.unit.tsx b/packages/react/src/lib/components/Plots/Bar/GroupedBar/GroupedBar.unit.tsx index 2dcaafe4..688c5280 100644 --- a/packages/react/src/lib/components/Plots/Bar/GroupedBar/GroupedBar.unit.tsx +++ b/packages/react/src/lib/components/Plots/Bar/GroupedBar/GroupedBar.unit.tsx @@ -64,13 +64,13 @@ describe("GroupedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -89,18 +89,18 @@ describe("GroupedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", + "chart/addLegendItem", // Mouseexit - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); @@ -188,14 +188,14 @@ describe("GroupedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -233,22 +233,22 @@ describe("GroupedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", + "chart/addLegendItem", // Mouseover - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", // Mouseexit - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); diff --git a/packages/react/src/lib/components/Plots/Bar/StackedBar/StackedBar.unit.tsx b/packages/react/src/lib/components/Plots/Bar/StackedBar/StackedBar.unit.tsx index 16754a63..2053dba9 100644 --- a/packages/react/src/lib/components/Plots/Bar/StackedBar/StackedBar.unit.tsx +++ b/packages/react/src/lib/components/Plots/Bar/StackedBar/StackedBar.unit.tsx @@ -62,13 +62,13 @@ describe("StackedBar", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -87,19 +87,19 @@ describe("StackedBar", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", + "chart/addLegendItem", // Mouseexit - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); @@ -187,14 +187,14 @@ describe("StackedBar", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/mouseMove", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -232,20 +232,20 @@ describe("StackedBar", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/mouseMove", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); diff --git a/packages/react/src/lib/components/Plots/Column/Column/Column.unit.tsx b/packages/react/src/lib/components/Plots/Column/Column/Column.unit.tsx index 4e9af72a..dacdc4ca 100644 --- a/packages/react/src/lib/components/Plots/Column/Column/Column.unit.tsx +++ b/packages/react/src/lib/components/Plots/Column/Column/Column.unit.tsx @@ -60,12 +60,12 @@ describe("Column", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -84,17 +84,17 @@ describe("Column", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", // Mouseexit - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); @@ -182,13 +182,13 @@ describe("Column", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -226,21 +226,21 @@ describe("Column", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", // Mouseover - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", // Mouseexit - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); diff --git a/packages/react/src/lib/components/Plots/Column/GroupedColumn/GroupedColumn.unit.tsx b/packages/react/src/lib/components/Plots/Column/GroupedColumn/GroupedColumn.unit.tsx index 4ed46287..d57b6ae5 100644 --- a/packages/react/src/lib/components/Plots/Column/GroupedColumn/GroupedColumn.unit.tsx +++ b/packages/react/src/lib/components/Plots/Column/GroupedColumn/GroupedColumn.unit.tsx @@ -64,13 +64,13 @@ describe("GroupedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -89,18 +89,18 @@ describe("GroupedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", + "chart/addLegendItem", // Mouseexit - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); @@ -188,14 +188,14 @@ describe("GroupedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -233,22 +233,22 @@ describe("GroupedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", + "chart/addLegendItem", // Mouseover - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", // Mouseexit - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); diff --git a/packages/react/src/lib/components/Plots/Column/StackedColumn/StackedColumn.unit.tsx b/packages/react/src/lib/components/Plots/Column/StackedColumn/StackedColumn.unit.tsx index 75612d66..40b8c851 100644 --- a/packages/react/src/lib/components/Plots/Column/StackedColumn/StackedColumn.unit.tsx +++ b/packages/react/src/lib/components/Plots/Column/StackedColumn/StackedColumn.unit.tsx @@ -62,13 +62,13 @@ describe("StackedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -87,19 +87,19 @@ describe("StackedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", + "chart/addLegendItem", // Mouseexit - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); @@ -187,14 +187,14 @@ describe("StackedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/mouseMove", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", ]); }); @@ -232,20 +232,20 @@ describe("StackedColumn", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.ADD_DROPLINE", - "EVENT.MOUSE_MOVE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_DROPLINE", + "chart/addLegendItem", + "chart/addLegendItem", + "event/mouseMove", + "event/addTooltipItem", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/addDropline", + "event/mouseMove", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeTooltipItem", + "event/removeDropline", ]); }); diff --git a/packages/react/src/lib/components/Plots/Line/Line/Line.unit.tsx b/packages/react/src/lib/components/Plots/Line/Line/Line.unit.tsx index 5fa8c73d..24115894 100644 --- a/packages/react/src/lib/components/Plots/Line/Line/Line.unit.tsx +++ b/packages/react/src/lib/components/Plots/Line/Line/Line.unit.tsx @@ -1,10 +1,10 @@ +import { chartActions, createStore, eventActions } from "@chart-io/core"; import * as d3 from "@chart-io/d3"; -import { createStore } from "@chart-io/core"; import { act, render } from "@testing-library/react"; -import { Provider } from "react-redux"; -import React from "react"; import { toMatchImageSnapshot } from "jest-image-snapshot"; +import React from "react"; +import { Provider } from "react-redux"; import { VIRTUAL_CANVAS_DEBOUNCE, VirtualCanvas } from "../../../VirtualCanvas"; import { Line } from "./Line"; @@ -80,10 +80,14 @@ describe("Line", () => { await wait(10); act(() => { - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } }); - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y"], scale: scales.y } }); - store.dispatch({ type: "CHART.SET_DATA", payload: data }); - store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } }); + store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x })); + store.dispatch(chartActions.setScales({ fields: ["y"], scale: scales.y })); + store.dispatch(chartActions.setChartData(data)); + store.dispatch(chartActions.setDimensions({ + width: 200, + height: 200, + margin: { top: 0, left: 0, bottom: 0, right: 0 }, + })); }); // Spy on the store for the updates from the Area chart @@ -92,20 +96,20 @@ describe("Line", () => { act(() => { // Simulate a mouse move on the background - store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } }); + store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 })); }); await wait(1); const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "EVENT.MOUSE_ENTER", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "event/mouseEnter", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", ]); }); }); @@ -155,10 +159,14 @@ describe("Line", () => { await wait(10); act(() => { - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } }); - store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y"], scale: scales.y } }); - store.dispatch({ type: "CHART.SET_DATA", payload: data }); - store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } }); + store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x })); + store.dispatch(chartActions.setScales({ fields: ["y"], scale: scales.y })); + store.dispatch(chartActions.setChartData(data)); + store.dispatch(chartActions.setDimensions({ + width: 200, + height: 200, + margin: { top: 0, left: 0, bottom: 0, right: 0 }, + })); }); // Spy on the store for the updates from the Area chart @@ -167,20 +175,20 @@ describe("Line", () => { // Simulate a mouse move on the background act(() => { - store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } }); + store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 })); }); await wait(1); const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "EVENT.MOUSE_ENTER", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "event/mouseEnter", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", ]); }); }); diff --git a/packages/react/src/lib/components/Plots/Line/Line/LineBase.tsx b/packages/react/src/lib/components/Plots/Line/Line/LineBase.tsx index 3559caaa..7164fdb2 100644 --- a/packages/react/src/lib/components/Plots/Line/Line/LineBase.tsx +++ b/packages/react/src/lib/components/Plots/Line/Line/LineBase.tsx @@ -1,7 +1,8 @@ -import * as d3 from "@chart-io/d3"; import { chartSelectors, IState, line } from "@chart-io/core"; +import * as d3 from "@chart-io/d3"; import type { IPlotProps } from "@chart-io/types"; +import { useMemo } from "react"; import { useSelector } from "react-redux"; import { useLegendItem, useRender } from "../../../../hooks"; @@ -29,7 +30,7 @@ export function LineBase({ const animationDuration = useSelector((s: IState) => chartSelectors.animationDuration(s)); const seriesColor = color || theme.series.colors[0]; - const sortedData = data.sort((a, b) => d3.ascending(a[x], b[x])); + const sortedData = useMemo(() => data.toSorted((a, b) => d3.ascending(a[x], b[x])), [data, x]); useLegendItem(y, "line", showInLegend, seriesColor); diff --git a/packages/react/src/lib/components/Plots/Scatter/Scatter/Scatter.unit.tsx b/packages/react/src/lib/components/Plots/Scatter/Scatter/Scatter.unit.tsx index e1240231..5163582b 100644 --- a/packages/react/src/lib/components/Plots/Scatter/Scatter/Scatter.unit.tsx +++ b/packages/react/src/lib/components/Plots/Scatter/Scatter/Scatter.unit.tsx @@ -1,6 +1,6 @@ import * as d3 from "@chart-io/d3"; -import React from "react"; import { toMatchImageSnapshot } from "jest-image-snapshot"; +import React from "react"; import { VIRTUAL_CANVAS_DEBOUNCE, VirtualCanvas } from "../../../VirtualCanvas"; import { Scatter } from "./Scatter"; @@ -60,14 +60,14 @@ describe("Scatter", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "chart/addLegendItem", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", ]); }); @@ -86,20 +86,20 @@ describe("Scatter", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", - "EVENT.REMOVE_MARKER", - "EVENT.REMOVE_DROPLINE", - "EVENT.REMOVE_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", + "chart/addLegendItem", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", + "event/removeMarker", + "event/removeDropline", + "event/removeDropline", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", ]); }); @@ -216,15 +216,15 @@ describe("Scatter", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", - "EVENT.MOUSE_MOVE", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "chart/addLegendItem", + "event/mouseMove", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", ]); }); @@ -253,25 +253,25 @@ describe("Scatter", () => { const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type); actionsIncludes(dispatchCalls, [ - "CHART.ADD_LEGEND_ITEM", + "chart/addLegendItem", // Mouseover - "EVENT.MOUSE_MOVE", - "EVENT.ADD_MARKER", - "EVENT.ADD_DROPLINE", - "EVENT.ADD_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.ADD_TOOLTIP_ITEM", - "EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT", + "event/mouseMove", + "event/addMarker", + "event/addDropline", + "event/addDropline", + "event/setTooltipBorderColor", + "event/addTooltipItem", + "event/addTooltipItem", + "event/setPositionEvent", // MouseExit - "EVENT.MOUSE_MOVE", - "EVENT.REMOVE_MARKER", - "EVENT.REMOVE_DROPLINE", - "EVENT.REMOVE_DROPLINE", - "EVENT.SET_TOOLTIP_COLOR", - "EVENT.REMOVE_TOOLTIP_ITEM", - "EVENT.REMOVE_TOOLTIP_ITEM", + "event/mouseMove", + "event/removeMarker", + "event/removeDropline", + "event/removeDropline", + "event/setTooltipBorderColor", + "event/removeTooltipItem", + "event/removeTooltipItem", ]); }); diff --git a/packages/react/src/lib/components/Scale/Scale.tsx b/packages/react/src/lib/components/Scale/Scale.tsx index 7c645ddb..5134d505 100644 --- a/packages/react/src/lib/components/Scale/Scale.tsx +++ b/packages/react/src/lib/components/Scale/Scale.tsx @@ -32,7 +32,7 @@ export function Scale({ fields, scale }: IScaleProps) { useEffect(() => { // @ts-ignore: TODO: Fix this - store.dispatch(chartActions.setScales(fieldsArray, scale)); + store.dispatch(chartActions.setScales({ fields: fieldsArray, scale })); }, [fieldsArray, scale, store.dispatch]); return ; diff --git a/packages/react/src/lib/stories/Extensibility.mdx b/packages/react/src/lib/stories/Extensibility.mdx index 97d68389..83011846 100644 --- a/packages/react/src/lib/stories/Extensibility.mdx +++ b/packages/react/src/lib/stories/Extensibility.mdx @@ -46,7 +46,7 @@ The customReducers prop takes the form of a keyed object, where each key represe const customReducers = { tooltips: (state = {}, action) => { switch(action.type) { - case "EVENT.MOUSE_ENTER": { + case "event/mouseEnter": { return { tooltip: true, ...state }; } default: return state;