-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react-components): hide/show properties from legend
- Loading branch information
Showing
17 changed files
with
311 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
packages/react-components/src/components/chart/legend/hide.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
packages/react-components/src/components/chart/legend/show.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
105 changes: 105 additions & 0 deletions
105
packages/react-components/src/components/chart/legend/useChartLegend.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { DataStream } from '@iot-app-kit/core'; | ||
| import { render, renderHook, getByText } from '@testing-library/react'; | ||
| import { SeriesOption } from 'echarts'; | ||
| import useChartsLegend from './useChartsLegend'; | ||
| import React from 'react'; | ||
| import { useChartStore } from '../store'; | ||
|
|
||
| const DATA_STREAM: DataStream = { | ||
| id: 'abc-1', | ||
| data: [ | ||
| { x: 1, y: 0 }, | ||
| { x: 2, y: 1 }, | ||
| ], | ||
| resolution: 0, | ||
| name: 'Average Wind Speed', | ||
| }; | ||
|
|
||
| const mockSeries = [ | ||
| { | ||
| id: 'abc-1', | ||
| name: 'Average Wind Speed', | ||
| data: [ | ||
| [1689264600000, 22.939564631713747], | ||
| [1689264900000, 24.054178935438895], | ||
| [1689265200000, 20.840328700172748], | ||
| [1689265500000, 17.627425014582514], | ||
| [1689265800000, 17.521569204159785], | ||
| ], | ||
| type: 'line', | ||
| step: false, | ||
| symbol: 'circle', | ||
| symbolSize: 4, | ||
| itemStyle: { | ||
| color: '#2ea597', | ||
| opacity: 1, | ||
| }, | ||
| lineStyle: { | ||
| color: '#2ea597', | ||
| type: 'solid', | ||
| width: 2, | ||
| opacity: 1, | ||
| }, | ||
| yAxisIndex: 0, | ||
| }, | ||
| ] as SeriesOption[]; | ||
|
|
||
| const setupStore = () => { | ||
| renderHook(() => useChartStore((state) => state.unHighlightDataStream)); | ||
| renderHook(() => useChartStore((state) => state.highlightedDataStreams)); | ||
| renderHook(() => useChartStore((state) => state.highlightDataStream)); | ||
|
|
||
| renderHook(() => useChartStore((state) => state.unHideDataStream)); | ||
| renderHook(() => useChartStore((state) => state.hiddenDataStreams)); | ||
| renderHook(() => useChartStore((state) => state.hideDataStream)); | ||
| }; | ||
|
|
||
| describe('useChartsLegend sets correct items', () => { | ||
| beforeEach(setupStore); | ||
|
|
||
| it('populates Legend Cell correctly', () => { | ||
| const { result: chart } = renderHook(() => | ||
| useChartsLegend({ datastreams: [DATA_STREAM], series: mockSeries, width: 100, graphic: [] }) | ||
| ); | ||
| expect(chart.current.items).toStrictEqual([ | ||
| { | ||
| name: 'Average Wind Speed', | ||
| lineColor: '#2ea597', | ||
| datastream: { | ||
| id: 'abc-1', | ||
| data: [ | ||
| { x: 1, y: 0 }, | ||
| { x: 2, y: 1 }, | ||
| ], | ||
| resolution: 0, | ||
| name: 'Average Wind Speed', | ||
| }, | ||
| width: 100, | ||
| }, | ||
| ]); | ||
| }); | ||
|
|
||
| it('populates column definitions correctly', () => { | ||
| const { result: chartData } = renderHook(() => | ||
| useChartsLegend({ datastreams: [DATA_STREAM], series: mockSeries, width: 100, graphic: [] }) | ||
| ); | ||
| const e = { | ||
| name: 'Average Wind Speed', | ||
| lineColor: '#2ea597', | ||
| datastream: { | ||
| id: 'abc-1', | ||
| data: [ | ||
| { x: 1, y: 0 }, | ||
| { x: 2, y: 1 }, | ||
| ], | ||
| resolution: 0, | ||
| name: 'Average Wind Speed', | ||
| }, | ||
| width: 100, | ||
| }; | ||
| chartData.current.columnDefinitions.forEach((def) => { | ||
| const container = render(<>{def.cell(e)}</>).baseElement; | ||
| expect(getByText(container, e.name)).toBeTruthy(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
packages/react-components/src/components/chart/store/contextDataStreams.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { DataStream } from '@iot-app-kit/core'; | ||
| import { StateCreator } from 'zustand'; | ||
|
|
||
| export interface DataStreamsData { | ||
| highlightedDataStreams: DataStream[]; | ||
| hiddenDataStreams: DataStream[]; | ||
| } | ||
|
|
||
| export interface DataStreamsState extends DataStreamsData { | ||
| highlightDataStream: (datastream?: DataStream) => void; | ||
| unHighlightDataStream: (datastream?: DataStream) => void; | ||
| hideDataStream: (datastream?: DataStream) => void; | ||
| unHideDataStream: (datastream?: DataStream) => void; | ||
| } | ||
|
|
||
| export const createDataStreamsSlice: StateCreator<DataStreamsState> = (set) => ({ | ||
| highlightedDataStreams: [], | ||
| hiddenDataStreams: [], | ||
| highlightDataStream: (datastream?: DataStream) => | ||
| set((state) => { | ||
| if (!datastream) return state; | ||
| return { highlightedDataStreams: [...state.highlightedDataStreams, datastream] }; | ||
| }), | ||
| unHighlightDataStream: (datastream) => | ||
| set((state) => { | ||
| if (!datastream) return state; | ||
| return { highlightedDataStreams: state.highlightedDataStreams.filter(({ id }) => id !== datastream.id) }; | ||
| }), | ||
| hideDataStream: (datastream?: DataStream) => | ||
| set((state) => { | ||
| if (!datastream) return state; | ||
| return { hiddenDataStreams: [...state.hiddenDataStreams, datastream] }; | ||
| }), | ||
| unHideDataStream: (datastream) => | ||
| set((state) => { | ||
| if (!datastream) return state; | ||
| return { hiddenDataStreams: state.hiddenDataStreams.filter(({ id }) => id !== datastream.id) }; | ||
| }), | ||
| }); |
Oops, something went wrong.