From 88a4f5427f5d676a099d2f39f38a8809a8c572b3 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 2 Apr 2025 17:52:42 -0700 Subject: [PATCH 1/6] Rename Header to ChartHeader --- charts/core/README.md | 6 +-- charts/core/src/Chart.stories.tsx | 43 +++++++++++++------ charts/core/src/Chart/Chart.tsx | 2 +- .../ChartHeader.spec.tsx} | 12 +++--- .../ChartHeader.styles.ts} | 0 .../ChartHeader.tsx} | 8 ++-- .../ChartHeader.types.ts} | 3 +- charts/core/src/ChartHeader/index.ts | 2 + charts/core/src/Header/index.ts | 2 - charts/core/src/index.ts | 2 +- 10 files changed, 49 insertions(+), 31 deletions(-) rename charts/core/src/{Header/Header.spec.tsx => ChartHeader/ChartHeader.spec.tsx} (71%) rename charts/core/src/{Header/Header.styles.ts => ChartHeader/ChartHeader.styles.ts} (100%) rename charts/core/src/{Header/Header.tsx => ChartHeader/ChartHeader.tsx} (78%) rename charts/core/src/{Header/Header.types.ts => ChartHeader/ChartHeader.types.ts} (78%) create mode 100644 charts/core/src/ChartHeader/index.ts delete mode 100644 charts/core/src/Header/index.ts diff --git a/charts/core/README.md b/charts/core/README.md index e62799d3ff..d74b86d801 100644 --- a/charts/core/README.md +++ b/charts/core/README.md @@ -21,10 +21,10 @@ npm install @lg-charts/core ## Basic Chart Example ```js -import { Chart, Line, Grid, XAxis, YAxis, type ChartStates } from '@lg-charts/core'; +import { Chart, ChartHeader, Line, Grid, XAxis, YAxis, type ChartStates } from '@lg-charts/core'; -
+ `${value}GB`} /> @@ -108,7 +108,7 @@ Component that takes in data points and renders a single line on the chart. | `name` | Unique name used to identify the series. **Important note:** If two lines have the same name, only one will be rendered. | `string` | | | `data` | Data array of tuples that represent x and y coordinates in the series. | `Array<[string \| number \| Date, string \| number \| Date]>` | | -### `Header` +### `ChartHeader` Component for rendering a header in a chart. diff --git a/charts/core/src/Chart.stories.tsx b/charts/core/src/Chart.stories.tsx index 3ab5463356..f376421828 100644 --- a/charts/core/src/Chart.stories.tsx +++ b/charts/core/src/Chart.stories.tsx @@ -3,19 +3,19 @@ import { storybookArgTypes } from '@lg-tools/storybook-utils'; import type { StoryObj } from '@storybook/react'; import { ChartProps } from './Chart/Chart.types'; -import { HeaderProps } from './Header/Header.types'; +import { ChartHeaderProps } from './ChartHeader/ChartHeader.types'; import { TooltipProps } from './Tooltip/Tooltip.types'; import { LineProps } from './Line'; import { makeLineData } from './testUtils'; import { ThresholdLineProps } from './ThresholdLine'; import { Chart, + ChartHeader, EventMarkerLine, EventMarkerLineProps, EventMarkerPoint, EventMarkerPointProps, Grid, - Header, Line, ThresholdLine, Tooltip, @@ -77,8 +77,8 @@ export const LiveExample: StoryObj<{ renderTooltip: boolean; tooltipSeriesValueFormatter: TooltipProps['seriesValueFormatter']; renderHeader: boolean; - headerTitle: HeaderProps['title']; - headerShowDivider: HeaderProps['showDivider']; + headerTitle: ChartHeaderProps['title']; + headerShowDivider: ChartHeaderProps['showDivider']; zoomSelectXAxis: boolean; zoomSelectYAxis: boolean; zoomSelectCallback; @@ -481,7 +481,7 @@ export const LiveExample: StoryObj<{ state={state} > {renderHeader && ( -
= { }} state="unset" > -
= { }} state="loading" > -
= { render: () => { return ( -
= { render: () => { return ( -
= { }} state="unset" > -
= { render: () => { return ( -
+ {lineData.map(({ name, data }) => ( ))} @@ -940,7 +940,7 @@ export const WithHeaderAndDivider: StoryObj<{}> = { render: () => { return ( -
+ {lineData.map(({ name, data }) => ( ))} @@ -953,7 +953,7 @@ export const WithHeaderContent: StoryObj<{}> = { render: () => { return ( -
= { }, }; +export const WithZoomAndTooltip: StoryObj<{}> = { + render: () => { + return ( + + {lineData.map(({ name, data }) => ( + + ))} + + ); + }, +}; + export const WithZoom: StoryObj<{}> = { render: () => { return ( diff --git a/charts/core/src/Chart/Chart.tsx b/charts/core/src/Chart/Chart.tsx index b0f0c6f0cd..5e837ae5bc 100644 --- a/charts/core/src/Chart/Chart.tsx +++ b/charts/core/src/Chart/Chart.tsx @@ -80,7 +80,7 @@ export function Chart({ {...listeners} > {/** - * Children other than Header are not expected to be rendered to the DOM, + * Children other than ChartHeader are not expected to be rendered to the DOM, * but are used to provide a more declarative API for adding functionality * to the chart canvas. They have access to the ChartContext and can be * used to add components like Line, Grid, etc. diff --git a/charts/core/src/Header/Header.spec.tsx b/charts/core/src/ChartHeader/ChartHeader.spec.tsx similarity index 71% rename from charts/core/src/Header/Header.spec.tsx rename to charts/core/src/ChartHeader/ChartHeader.spec.tsx index 71e8e58d16..5ffc605f10 100644 --- a/charts/core/src/Header/Header.spec.tsx +++ b/charts/core/src/ChartHeader/ChartHeader.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { axe } from 'jest-axe'; -import { Header } from './Header'; +import { ChartHeader } from './ChartHeader'; const defaultContentTestId = 'header-content'; @@ -11,23 +11,23 @@ const defaultProps = { headerContent:
, }; -const renderHeader = () => render(
); +const renderChartHeader = () => render(); -describe('@lg-charts/core/src/Header/Header', () => { +describe('@lg-charts/core/src/ChartHeader/ChartHeader', () => { test('does not have basic accessibility issues', async () => { - const { container } = renderHeader(); + const { container } = renderChartHeader(); const results = await axe(container); expect(results).toHaveNoViolations(); }); test('should display title value', () => { - renderHeader(); + renderChartHeader(); expect(screen.getByText(defaultProps.title)).toBeInTheDocument(); }); test('render component passed to headerContent', () => { - renderHeader(); + renderChartHeader(); expect(screen.getByTestId(defaultContentTestId)).toBeInTheDocument(); }); }); diff --git a/charts/core/src/Header/Header.styles.ts b/charts/core/src/ChartHeader/ChartHeader.styles.ts similarity index 100% rename from charts/core/src/Header/Header.styles.ts rename to charts/core/src/ChartHeader/ChartHeader.styles.ts diff --git a/charts/core/src/Header/Header.tsx b/charts/core/src/ChartHeader/ChartHeader.tsx similarity index 78% rename from charts/core/src/Header/Header.tsx rename to charts/core/src/ChartHeader/ChartHeader.tsx index d49a9d9480..8f85b7066a 100644 --- a/charts/core/src/Header/Header.tsx +++ b/charts/core/src/ChartHeader/ChartHeader.tsx @@ -5,16 +5,16 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { BaseFontSize } from '@leafygreen-ui/tokens'; import { Body } from '@leafygreen-ui/typography'; -import { getContainerStyles, titleStyles } from './Header.styles'; -import { HeaderProps } from './Header.types'; +import { getContainerStyles, titleStyles } from './ChartHeader.styles'; +import { ChartHeaderProps } from './ChartHeader.types'; -export function Header({ +export function ChartHeader({ title, showDivider, headerContent, className, ...rest -}: HeaderProps) { +}: ChartHeaderProps) { const { theme } = useDarkMode(); return (
, 'title'> { +export interface ChartHeaderProps + extends Omit, 'title'> { /** * The title of the chart */ diff --git a/charts/core/src/ChartHeader/index.ts b/charts/core/src/ChartHeader/index.ts new file mode 100644 index 0000000000..b4b1d75949 --- /dev/null +++ b/charts/core/src/ChartHeader/index.ts @@ -0,0 +1,2 @@ +export { ChartHeader } from './ChartHeader'; +export type { ChartHeaderProps } from './ChartHeader.types'; diff --git a/charts/core/src/Header/index.ts b/charts/core/src/Header/index.ts deleted file mode 100644 index 5c7d7607f4..0000000000 --- a/charts/core/src/Header/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Header } from './Header'; -export type { HeaderProps } from './Header.types'; diff --git a/charts/core/src/index.ts b/charts/core/src/index.ts index 53a4b76868..f63ccf8326 100644 --- a/charts/core/src/index.ts +++ b/charts/core/src/index.ts @@ -1,4 +1,5 @@ export { Chart, type ChartProps, ChartStates } from './Chart'; +export { ChartHeader, type ChartHeaderProps } from './ChartHeader'; export { EventMarkerLine, type EventMarkerLineProps, @@ -6,7 +7,6 @@ export { type EventMarkerPointProps, } from './EventMarkers'; export { Grid, type GridProps } from './Grid'; -export { Header, type HeaderProps } from './Header'; export { Line, type LineProps } from './Line'; export { ThresholdLine, type ThresholdLineProps } from './ThresholdLine'; export { type SeriesInfo, Tooltip, type TooltipProps } from './Tooltip'; From 0f2606c09e7423de75abed7a4c948e2b078ca2c9 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 2 Apr 2025 18:35:49 -0700 Subject: [PATCH 2/6] Rename Grid to ChartGrid --- charts/core/README.md | 6 ++-- charts/core/src/Chart.stories.tsx | 28 ++++++++++--------- charts/core/src/Chart/Chart.tsx | 2 +- .../Chart/config/getDefaultChartOptions.ts | 2 +- .../Grid.tsx => ChartGrid/ChartGrid.tsx} | 9 ++++-- .../ChartGrid.types.ts} | 2 +- .../src/{Grid => ChartGrid}/config/index.ts | 0 .../config/useGridOptions.ts | 4 +-- charts/core/src/ChartGrid/index.ts | 2 ++ charts/core/src/Grid/index.ts | 2 -- charts/core/src/index.ts | 2 +- 11 files changed, 32 insertions(+), 27 deletions(-) rename charts/core/src/{Grid/Grid.tsx => ChartGrid/ChartGrid.tsx} (87%) rename charts/core/src/{Grid/Grid.types.ts => ChartGrid/ChartGrid.types.ts} (58%) rename charts/core/src/{Grid => ChartGrid}/config/index.ts (100%) rename charts/core/src/{Grid => ChartGrid}/config/useGridOptions.ts (87%) create mode 100644 charts/core/src/ChartGrid/index.ts delete mode 100644 charts/core/src/Grid/index.ts diff --git a/charts/core/README.md b/charts/core/README.md index d74b86d801..f1ca89bbb7 100644 --- a/charts/core/README.md +++ b/charts/core/README.md @@ -21,11 +21,11 @@ npm install @lg-charts/core ## Basic Chart Example ```js -import { Chart, ChartHeader, Line, Grid, XAxis, YAxis, type ChartStates } from '@lg-charts/core'; +import { Chart, ChartGrid, ChartHeader, Line, XAxis, YAxis, type ChartStates } from '@lg-charts/core'; - + `${value}GB`} /> )} {renderGrid && ( - + )} {renderTooltip && ( @@ -582,7 +584,7 @@ export const DarkMode: StoryObj<{}> = {
} /> - + @@ -634,7 +636,7 @@ export const LoadingState: StoryObj<{}> = { } /> - + @@ -680,7 +682,7 @@ export const OverlayState: StoryObj<{}> = { } /> - + @@ -726,7 +728,7 @@ export const DraggingState: StoryObj<{}> = { } /> - + @@ -781,7 +783,7 @@ export const ResizingWithContainer: StoryObj<{ containerWidth: number }> = { } /> - + @@ -888,7 +890,7 @@ export const WithGrid: StoryObj<{}> = { render: () => { return ( - + {lineData.map(({ name, data }) => ( ))} @@ -901,7 +903,7 @@ export const WithVerticalGrid: StoryObj<{}> = { render: () => { return ( - + {lineData.map(({ name, data }) => ( ))} @@ -914,7 +916,7 @@ export const WithHorizontalGrid: StoryObj<{}> = { render: () => { return ( - + {lineData.map(({ name, data }) => ( ))} diff --git a/charts/core/src/Chart/Chart.tsx b/charts/core/src/Chart/Chart.tsx index 5e837ae5bc..9701aa2362 100644 --- a/charts/core/src/Chart/Chart.tsx +++ b/charts/core/src/Chart/Chart.tsx @@ -83,7 +83,7 @@ export function Chart({ * Children other than ChartHeader are not expected to be rendered to the DOM, * but are used to provide a more declarative API for adding functionality * to the chart canvas. They have access to the ChartContext and can be - * used to add components like Line, Grid, etc. + * used to add components like Line, ChartGrid, etc. */} {children} diff --git a/charts/core/src/Chart/config/getDefaultChartOptions.ts b/charts/core/src/Chart/config/getDefaultChartOptions.ts index 9f6f2dabb4..58749b6735 100644 --- a/charts/core/src/Chart/config/getDefaultChartOptions.ts +++ b/charts/core/src/Chart/config/getDefaultChartOptions.ts @@ -47,7 +47,7 @@ export const getDefaultChartOptions = ( color: chartColors[theme], /** - * Though there's a Grid component that will render the grid lines, this allows the box + * Though there's a ChartGrid component that will render the grid lines, this allows the box * that contains the chart to to show with proper dimensions by default. */ grid: { diff --git a/charts/core/src/Grid/Grid.tsx b/charts/core/src/ChartGrid/ChartGrid.tsx similarity index 87% rename from charts/core/src/Grid/Grid.tsx rename to charts/core/src/ChartGrid/ChartGrid.tsx index 51d40e4c8f..a1dc32d5fe 100644 --- a/charts/core/src/Grid/Grid.tsx +++ b/charts/core/src/ChartGrid/ChartGrid.tsx @@ -6,7 +6,7 @@ import { color, InteractionState, Variant } from '@leafygreen-ui/tokens'; import { ChartOptions } from '../Chart'; import { useChartContext } from '../ChartContext'; -import { GridProps } from './Grid.types'; +import { ChartGridProps } from './ChartGrid.types'; const unsetGridOptions = { splitLine: { @@ -14,7 +14,10 @@ const unsetGridOptions = { }, }; -export function Grid({ horizontal = true, vertical = true }: GridProps) { +export function ChartGrid({ + horizontal = true, + vertical = true, +}: ChartGridProps) { const { chart } = useChartContext(); const { theme } = useDarkMode(); @@ -51,4 +54,4 @@ export function Grid({ horizontal = true, vertical = true }: GridProps) { return null; } -Grid.displayName = 'Grid'; +ChartGrid.displayName = 'ChartGrid'; diff --git a/charts/core/src/Grid/Grid.types.ts b/charts/core/src/ChartGrid/ChartGrid.types.ts similarity index 58% rename from charts/core/src/Grid/Grid.types.ts rename to charts/core/src/ChartGrid/ChartGrid.types.ts index 202e462de5..2035d53d3f 100644 --- a/charts/core/src/Grid/Grid.types.ts +++ b/charts/core/src/ChartGrid/ChartGrid.types.ts @@ -1,4 +1,4 @@ -export interface GridProps { +export interface ChartGridProps { vertical?: boolean; horizontal?: boolean; } diff --git a/charts/core/src/Grid/config/index.ts b/charts/core/src/ChartGrid/config/index.ts similarity index 100% rename from charts/core/src/Grid/config/index.ts rename to charts/core/src/ChartGrid/config/index.ts diff --git a/charts/core/src/Grid/config/useGridOptions.ts b/charts/core/src/ChartGrid/config/useGridOptions.ts similarity index 87% rename from charts/core/src/Grid/config/useGridOptions.ts rename to charts/core/src/ChartGrid/config/useGridOptions.ts index ab58954d4f..fc04d28765 100644 --- a/charts/core/src/Grid/config/useGridOptions.ts +++ b/charts/core/src/ChartGrid/config/useGridOptions.ts @@ -4,9 +4,9 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { color, InteractionState, Variant } from '@leafygreen-ui/tokens'; import { ChartOptions } from '../../Chart'; -import { GridProps } from '../Grid.types'; +import { ChartGridProps } from '../ChartGrid.types'; -export const useGridOptions = ({ horizontal, vertical }: GridProps) => { +export const useGridOptions = ({ horizontal, vertical }: ChartGridProps) => { const [options, setOptions] = useState>({}); const { theme } = useDarkMode(); diff --git a/charts/core/src/ChartGrid/index.ts b/charts/core/src/ChartGrid/index.ts new file mode 100644 index 0000000000..814ba15a84 --- /dev/null +++ b/charts/core/src/ChartGrid/index.ts @@ -0,0 +1,2 @@ +export { ChartGrid } from './ChartGrid'; +export type { ChartGridProps } from './ChartGrid.types'; diff --git a/charts/core/src/Grid/index.ts b/charts/core/src/Grid/index.ts deleted file mode 100644 index 4a1ba78880..0000000000 --- a/charts/core/src/Grid/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Grid } from './Grid'; -export type { GridProps } from './Grid.types'; diff --git a/charts/core/src/index.ts b/charts/core/src/index.ts index f63ccf8326..2e94047fa3 100644 --- a/charts/core/src/index.ts +++ b/charts/core/src/index.ts @@ -1,4 +1,5 @@ export { Chart, type ChartProps, ChartStates } from './Chart'; +export { ChartGrid, type ChartGridProps } from './ChartGrid'; export { ChartHeader, type ChartHeaderProps } from './ChartHeader'; export { EventMarkerLine, @@ -6,7 +7,6 @@ export { EventMarkerPoint, type EventMarkerPointProps, } from './EventMarkers'; -export { Grid, type GridProps } from './Grid'; export { Line, type LineProps } from './Line'; export { ThresholdLine, type ThresholdLineProps } from './ThresholdLine'; export { type SeriesInfo, Tooltip, type TooltipProps } from './Tooltip'; From 35bc6242dae48b5b053809c7fdcd2d76df26858f Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Thu, 3 Apr 2025 17:00:46 -0700 Subject: [PATCH 3/6] Remove unused hook --- charts/core/src/ChartGrid/config/index.ts | 1 - .../src/ChartGrid/config/useGridOptions.ts | 32 ------------------- 2 files changed, 33 deletions(-) delete mode 100644 charts/core/src/ChartGrid/config/index.ts delete mode 100644 charts/core/src/ChartGrid/config/useGridOptions.ts diff --git a/charts/core/src/ChartGrid/config/index.ts b/charts/core/src/ChartGrid/config/index.ts deleted file mode 100644 index 5262cb0b2e..0000000000 --- a/charts/core/src/ChartGrid/config/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useGridOptions } from './useGridOptions'; diff --git a/charts/core/src/ChartGrid/config/useGridOptions.ts b/charts/core/src/ChartGrid/config/useGridOptions.ts deleted file mode 100644 index fc04d28765..0000000000 --- a/charts/core/src/ChartGrid/config/useGridOptions.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; -import { color, InteractionState, Variant } from '@leafygreen-ui/tokens'; - -import { ChartOptions } from '../../Chart'; -import { ChartGridProps } from '../ChartGrid.types'; - -export const useGridOptions = ({ horizontal, vertical }: ChartGridProps) => { - const [options, setOptions] = useState>({}); - const { theme } = useDarkMode(); - - useEffect(() => { - setOptions(prevOptions => { - const updatedOptions = { ...prevOptions }; - const getUpdatedLineOptions = (show: boolean) => ({ - splitLine: { - show: show, - lineStyle: { - color: - color[theme].border[Variant.Secondary][InteractionState.Default], - }, - }, - }); - updatedOptions.xAxis = getUpdatedLineOptions(!!vertical); - updatedOptions.yAxis = getUpdatedLineOptions(!!horizontal); - return updatedOptions; - }); - }, [horizontal, vertical, theme]); - - return options; -}; From aea7a8c380a5ade4c8f478c697894fd0dcde7709 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Thu, 3 Apr 2025 17:12:53 -0700 Subject: [PATCH 4/6] Rename Tooltip to ChartTooltip --- charts/core/README.md | 2 +- charts/core/src/Chart.stories.tsx | 24 +++++++++---------- .../ChartTooltip.tsx} | 9 ++++--- .../ChartTooltip.types.ts} | 2 +- .../CustomTooltip/CustomTooltip.spec.tsx | 2 +- .../CustomTooltip/CustomTooltip.stories.tsx | 2 +- .../CustomTooltip/CustomTooltip.styles.ts | 0 .../CustomTooltip/CustomTooltip.testUtils.ts | 2 +- .../CustomTooltip/CustomTooltip.tsx | 0 .../CustomTooltip/CustomTooltip.types.tsx | 14 +++++++++++ .../SeriesList/SeriesList.styles.ts | 0 .../CustomTooltip/SeriesList/SeriesList.tsx | 2 +- .../SeriesList/SeriesList.types.ts | 0 .../CustomTooltip/SeriesList/index.ts | 0 .../SeriesListItem/SeriesListItem.styles.ts | 0 .../SeriesListItem/SeriesListItem.tsx | 0 .../SeriesListItem/SeriesListItem.types.ts | 2 +- .../CustomTooltip/SeriesListItem/index.ts | 0 .../SeriesListItemColorDot.styles.ts | 0 .../SeriesListItemColorDot.tsx | 0 .../SeriesListItemColorDot.types.ts | 2 +- .../SeriesListItemColorDot/index.ts | 0 .../CustomTooltip/index.ts | 0 charts/core/src/ChartTooltip/index.ts | 2 ++ .../{Tooltip => ChartTooltip}/utils.spec.ts | 2 +- .../src/{Tooltip => ChartTooltip}/utils.ts | 0 .../BaseEventMarker/BaseEventMarker.tsx | 2 +- .../core/src/ThresholdLine/ThresholdLine.tsx | 2 +- .../CustomTooltip/CustomTooltip.types.tsx | 11 --------- charts/core/src/Tooltip/index.ts | 2 -- charts/core/src/index.ts | 6 ++++- 31 files changed, 50 insertions(+), 40 deletions(-) rename charts/core/src/{Tooltip/Tooltip.tsx => ChartTooltip/ChartTooltip.tsx} (93%) rename charts/core/src/{Tooltip/Tooltip.types.tsx => ChartTooltip/ChartTooltip.types.ts} (97%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/CustomTooltip.spec.tsx (98%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/CustomTooltip.stories.tsx (98%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/CustomTooltip.styles.ts (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/CustomTooltip.testUtils.ts (99%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/CustomTooltip.tsx (100%) create mode 100644 charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.types.tsx rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesList/SeriesList.styles.ts (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesList/SeriesList.tsx (95%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesList/SeriesList.types.ts (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesList/index.ts (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesListItem/SeriesListItem.styles.ts (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesListItem/SeriesListItem.tsx (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesListItem/SeriesListItem.types.ts (83%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesListItem/index.ts (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.styles.ts (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.tsx (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.types.ts (57%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/SeriesListItemColorDot/index.ts (100%) rename charts/core/src/{Tooltip => ChartTooltip}/CustomTooltip/index.ts (100%) create mode 100644 charts/core/src/ChartTooltip/index.ts rename charts/core/src/{Tooltip => ChartTooltip}/utils.spec.ts (95%) rename charts/core/src/{Tooltip => ChartTooltip}/utils.ts (100%) delete mode 100644 charts/core/src/Tooltip/CustomTooltip/CustomTooltip.types.tsx delete mode 100644 charts/core/src/Tooltip/index.ts diff --git a/charts/core/README.md b/charts/core/README.md index f1ca89bbb7..124d40b59f 100644 --- a/charts/core/README.md +++ b/charts/core/README.md @@ -155,7 +155,7 @@ Renders a y-axis. | `label` _(optional)_ | Label name to be rendered on the axis. | `string` | | | `formatter` _(optional)_ | Callback function for formatting tick values. | `(value: string, index: number) => string` | | -### `Tooltip` +### `ChartTooltip` Renders a tooltip onto the chart. diff --git a/charts/core/src/Chart.stories.tsx b/charts/core/src/Chart.stories.tsx index b4f6a81fe3..c5fad7f124 100644 --- a/charts/core/src/Chart.stories.tsx +++ b/charts/core/src/Chart.stories.tsx @@ -4,7 +4,7 @@ import type { StoryObj } from '@storybook/react'; import { ChartProps } from './Chart/Chart.types'; import { ChartHeaderProps } from './ChartHeader/ChartHeader.types'; -import { TooltipProps } from './Tooltip/Tooltip.types'; +import { ChartTooltipProps } from './ChartTooltip/ChartTooltip.types'; import { LineProps } from './Line'; import { makeLineData } from './testUtils'; import { ThresholdLineProps } from './ThresholdLine'; @@ -12,13 +12,13 @@ import { Chart, ChartGrid, ChartHeader, + ChartTooltip, EventMarkerLine, EventMarkerLineProps, EventMarkerPoint, EventMarkerPointProps, Line, ThresholdLine, - Tooltip, XAxis, XAxisProps, YAxis, @@ -75,7 +75,7 @@ export const LiveExample: StoryObj<{ yAxisFormatter: YAxisProps['formatter']; yAxisLabel: YAxisProps['label']; renderTooltip: boolean; - tooltipSeriesValueFormatter: TooltipProps['seriesValueFormatter']; + tooltipSeriesValueFormatter: ChartTooltipProps['seriesValueFormatter']; renderHeader: boolean; headerTitle: ChartHeaderProps['title']; headerShowDivider: ChartHeaderProps['showDivider']; @@ -504,7 +504,7 @@ export const LiveExample: StoryObj<{ /> )} {renderTooltip && ( - + )} {renderXAxis && ( = { } /> - + @@ -637,7 +637,7 @@ export const LoadingState: StoryObj<{}> = { } /> - + @@ -683,7 +683,7 @@ export const OverlayState: StoryObj<{}> = { } /> - + @@ -729,7 +729,7 @@ export const DraggingState: StoryObj<{}> = { } /> - + @@ -784,7 +784,7 @@ export const ResizingWithContainer: StoryObj<{ containerWidth: number }> = { } /> - + @@ -825,7 +825,7 @@ export const WithTooltip: StoryObj<{}> = { render: () => { return ( - + {lineData.map(({ name, data }) => ( ))} @@ -1137,13 +1137,13 @@ export const SyncedByGroupID: StoryObj<{}> = { style={{ display: 'grid', gridTemplateColumns: '1fr', width: '100%' }} > - + {lineData.map(({ name, data }) => ( ))} - + {lineData.map(({ name, data }) => ( ))} diff --git a/charts/core/src/Tooltip/Tooltip.tsx b/charts/core/src/ChartTooltip/ChartTooltip.tsx similarity index 93% rename from charts/core/src/Tooltip/Tooltip.tsx rename to charts/core/src/ChartTooltip/ChartTooltip.tsx index cab218f483..57ed35fcab 100644 --- a/charts/core/src/Tooltip/Tooltip.tsx +++ b/charts/core/src/ChartTooltip/ChartTooltip.tsx @@ -6,14 +6,17 @@ import { color, InteractionState, Variant } from '@leafygreen-ui/tokens'; import { useChartContext } from '../ChartContext'; +import { + CallbackSeriesDataPoint, + ChartTooltipProps, +} from './ChartTooltip.types'; import { CustomTooltip } from './CustomTooltip'; -import { CallbackSeriesDataPoint, TooltipProps } from './Tooltip.types'; -export function Tooltip({ +export function ChartTooltip({ seriesValueFormatter, seriesNameFormatter, sort, -}: TooltipProps) { +}: ChartTooltipProps) { const { chart } = useChartContext(); const { theme } = useDarkMode(); diff --git a/charts/core/src/Tooltip/Tooltip.types.tsx b/charts/core/src/ChartTooltip/ChartTooltip.types.ts similarity index 97% rename from charts/core/src/Tooltip/Tooltip.types.tsx rename to charts/core/src/ChartTooltip/ChartTooltip.types.ts index 515ddfb16a..d139d2b4bb 100644 --- a/charts/core/src/Tooltip/Tooltip.types.tsx +++ b/charts/core/src/ChartTooltip/ChartTooltip.types.ts @@ -13,7 +13,7 @@ export interface SeriesInfo { value: OptionDataValue; } -export interface TooltipProps { +export interface ChartTooltipProps { sort?: (seriesA: SeriesInfo, seriesB: SeriesInfo) => number; seriesValueFormatter?: (value: OptionDataValue) => ReactNode; seriesNameFormatter?: (name: SeriesName) => ReactNode; diff --git a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.spec.tsx b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.spec.tsx similarity index 98% rename from charts/core/src/Tooltip/CustomTooltip/CustomTooltip.spec.tsx rename to charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.spec.tsx index 89abf1b7b6..1b3fad5f33 100644 --- a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.spec.tsx +++ b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.spec.tsx @@ -76,7 +76,7 @@ const renderCustomTooltip = (props: Partial = {}) => { return render(); }; -describe('@lg-charts/core/Tooltip/CustomTooltip', () => { +describe('@lg-charts/core/ChartTooltip/CustomTooltip', () => { test('should render properly formatted date', () => { renderCustomTooltip(); const dateElement = screen.getByText( diff --git a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.stories.tsx b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.stories.tsx similarity index 98% rename from charts/core/src/Tooltip/CustomTooltip/CustomTooltip.stories.tsx rename to charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.stories.tsx index f1802f3d3a..649bd53612 100644 --- a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.stories.tsx +++ b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.stories.tsx @@ -9,7 +9,7 @@ import { sampleTooltipParams } from './CustomTooltip.testUtils'; import { CustomTooltipProps } from './CustomTooltip.types'; export default { - title: 'Charts/Tooltip', + title: 'Charts/ChartTooltip', component: CustomTooltip, args: { seriesData: sampleTooltipParams, diff --git a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.styles.ts b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.styles.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/CustomTooltip.styles.ts rename to charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.styles.ts diff --git a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.testUtils.ts b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.testUtils.ts similarity index 99% rename from charts/core/src/Tooltip/CustomTooltip/CustomTooltip.testUtils.ts rename to charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.testUtils.ts index 4c6d5ed4a6..5973f1b8e5 100644 --- a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.testUtils.ts +++ b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.testUtils.ts @@ -1,4 +1,4 @@ -import { CallbackSeriesDataPoint } from '../Tooltip.types'; +import { CallbackSeriesDataPoint } from '../ChartTooltip.types'; export const sampleTooltipParams: Array = [ { diff --git a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.tsx b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.tsx similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/CustomTooltip.tsx rename to charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.tsx diff --git a/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.types.tsx b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.types.tsx new file mode 100644 index 0000000000..8c53f68d8d --- /dev/null +++ b/charts/core/src/ChartTooltip/CustomTooltip/CustomTooltip.types.tsx @@ -0,0 +1,14 @@ +import { DarkModeProps } from '@leafygreen-ui/lib'; + +import { + CallbackSeriesDataPoint, + ChartTooltipProps, +} from '../ChartTooltip.types'; + +export interface CustomTooltipProps extends DarkModeProps { + seriesData: Array; + sort?: ChartTooltipProps['sort']; + seriesValueFormatter?: ChartTooltipProps['seriesValueFormatter']; + seriesNameFormatter?: ChartTooltipProps['seriesNameFormatter']; + headerFormatter?: ChartTooltipProps['headerFormatter']; +} diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesList/SeriesList.styles.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesList/SeriesList.styles.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesList/SeriesList.styles.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesList/SeriesList.styles.ts diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesList/SeriesList.tsx b/charts/core/src/ChartTooltip/CustomTooltip/SeriesList/SeriesList.tsx similarity index 95% rename from charts/core/src/Tooltip/CustomTooltip/SeriesList/SeriesList.tsx rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesList/SeriesList.tsx index ffda283302..e5f83071e3 100644 --- a/charts/core/src/Tooltip/CustomTooltip/SeriesList/SeriesList.tsx +++ b/charts/core/src/ChartTooltip/CustomTooltip/SeriesList/SeriesList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { SeriesName } from '@lg-charts/series-provider'; -import { OptionDataValue } from '../../Tooltip.types'; +import { OptionDataValue } from '../../ChartTooltip.types'; import { SeriesListItem } from '../SeriesListItem'; import { SeriesListProps } from './SeriesList.types'; diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesList/SeriesList.types.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesList/SeriesList.types.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesList/SeriesList.types.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesList/SeriesList.types.ts diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesList/index.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesList/index.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesList/index.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesList/index.ts diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesListItem/SeriesListItem.styles.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/SeriesListItem.styles.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesListItem/SeriesListItem.styles.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/SeriesListItem.styles.ts diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesListItem/SeriesListItem.tsx b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/SeriesListItem.tsx similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesListItem/SeriesListItem.tsx rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/SeriesListItem.tsx diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesListItem/SeriesListItem.types.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/SeriesListItem.types.ts similarity index 83% rename from charts/core/src/Tooltip/CustomTooltip/SeriesListItem/SeriesListItem.types.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/SeriesListItem.types.ts index e3671f3fd8..94f54cee66 100644 --- a/charts/core/src/Tooltip/CustomTooltip/SeriesListItem/SeriesListItem.types.ts +++ b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/SeriesListItem.types.ts @@ -1,4 +1,4 @@ -import { CallbackSeriesDataPoint } from '../../Tooltip.types'; +import { CallbackSeriesDataPoint } from '../../ChartTooltip.types'; import { SeriesListProps } from '../SeriesList/SeriesList.types'; export interface SeriesListItemProps diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesListItem/index.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/index.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesListItem/index.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesListItem/index.ts diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.styles.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.styles.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.styles.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.styles.ts diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.tsx b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.tsx similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.tsx rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.tsx diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.types.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.types.ts similarity index 57% rename from charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.types.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.types.ts index fe27295b9b..5671198126 100644 --- a/charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.types.ts +++ b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/SeriesListItemColorDot.types.ts @@ -1,4 +1,4 @@ -import { CallbackSeriesDataPoint } from '../../Tooltip.types'; +import { CallbackSeriesDataPoint } from '../../ChartTooltip.types'; export interface SeriesListItemColorDotProps { color: CallbackSeriesDataPoint['color']; diff --git a/charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/index.ts b/charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/index.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/SeriesListItemColorDot/index.ts rename to charts/core/src/ChartTooltip/CustomTooltip/SeriesListItemColorDot/index.ts diff --git a/charts/core/src/Tooltip/CustomTooltip/index.ts b/charts/core/src/ChartTooltip/CustomTooltip/index.ts similarity index 100% rename from charts/core/src/Tooltip/CustomTooltip/index.ts rename to charts/core/src/ChartTooltip/CustomTooltip/index.ts diff --git a/charts/core/src/ChartTooltip/index.ts b/charts/core/src/ChartTooltip/index.ts new file mode 100644 index 0000000000..690c62abf0 --- /dev/null +++ b/charts/core/src/ChartTooltip/index.ts @@ -0,0 +1,2 @@ +export { ChartTooltip } from './ChartTooltip'; +export type { ChartTooltipProps, SeriesInfo } from './ChartTooltip.types'; diff --git a/charts/core/src/Tooltip/utils.spec.ts b/charts/core/src/ChartTooltip/utils.spec.ts similarity index 95% rename from charts/core/src/Tooltip/utils.spec.ts rename to charts/core/src/ChartTooltip/utils.spec.ts index 1de09fe20e..ef39a82b7f 100644 --- a/charts/core/src/Tooltip/utils.spec.ts +++ b/charts/core/src/ChartTooltip/utils.spec.ts @@ -4,7 +4,7 @@ import { ChartStates } from '../Chart'; import { shouldShowTooltip } from './utils'; -describe('@lg-chart/core/Tooltip/utils', () => { +describe('@lg-chart/core/ChartTooltip/utils', () => { describe('shouldShowTooltip', () => { test('should return true when chartState and chartCardState are undefined', () => { const result = shouldShowTooltip({}); diff --git a/charts/core/src/Tooltip/utils.ts b/charts/core/src/ChartTooltip/utils.ts similarity index 100% rename from charts/core/src/Tooltip/utils.ts rename to charts/core/src/ChartTooltip/utils.ts diff --git a/charts/core/src/EventMarkers/BaseEventMarker/BaseEventMarker.tsx b/charts/core/src/EventMarkers/BaseEventMarker/BaseEventMarker.tsx index 5ad7eb4991..5ac0017190 100644 --- a/charts/core/src/EventMarkers/BaseEventMarker/BaseEventMarker.tsx +++ b/charts/core/src/EventMarkers/BaseEventMarker/BaseEventMarker.tsx @@ -32,7 +32,7 @@ export function BaseEventMarker({ * Threshold lines/Points in Echarts are always attached to a series. In order * to make this a separate component and not a prop on `Line`, we must add * a dummy series with no data, and a mark line. This does not show up as a - * series in something like a Tooltip. + * series in something like a ChartTooltip. */ chart.addSeries( getMarkConfig({ name, theme, label, message, level, position, type }), diff --git a/charts/core/src/ThresholdLine/ThresholdLine.tsx b/charts/core/src/ThresholdLine/ThresholdLine.tsx index 0373b31c40..627b58aca9 100644 --- a/charts/core/src/ThresholdLine/ThresholdLine.tsx +++ b/charts/core/src/ThresholdLine/ThresholdLine.tsx @@ -103,7 +103,7 @@ export function ThresholdLine({ position, label, value }: ThresholdLineProps) { * Threshold lines in Echarts are always attached to a series. In order * to make this a separate component and not a prop on `Line`, we must add * a dummy series with no data, and a mark line. This does not show up as a - * series in something like a Tooltip. + * series in something like a ChartTooltip. */ chart.addSeries( getThresholdLineConfig({ name, position, theme, label, value }), diff --git a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.types.tsx b/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.types.tsx deleted file mode 100644 index d4ae05226a..0000000000 --- a/charts/core/src/Tooltip/CustomTooltip/CustomTooltip.types.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { DarkModeProps } from '@leafygreen-ui/lib'; - -import { CallbackSeriesDataPoint, TooltipProps } from '../Tooltip.types'; - -export interface CustomTooltipProps extends DarkModeProps { - seriesData: Array; - sort?: TooltipProps['sort']; - seriesValueFormatter?: TooltipProps['seriesValueFormatter']; - seriesNameFormatter?: TooltipProps['seriesNameFormatter']; - headerFormatter?: TooltipProps['headerFormatter']; -} diff --git a/charts/core/src/Tooltip/index.ts b/charts/core/src/Tooltip/index.ts deleted file mode 100644 index 15c896f44f..0000000000 --- a/charts/core/src/Tooltip/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Tooltip } from './Tooltip'; -export type { SeriesInfo, TooltipProps } from './Tooltip.types'; diff --git a/charts/core/src/index.ts b/charts/core/src/index.ts index 2e94047fa3..d12deed0b1 100644 --- a/charts/core/src/index.ts +++ b/charts/core/src/index.ts @@ -1,6 +1,11 @@ export { Chart, type ChartProps, ChartStates } from './Chart'; export { ChartGrid, type ChartGridProps } from './ChartGrid'; export { ChartHeader, type ChartHeaderProps } from './ChartHeader'; +export { + ChartTooltip, + type ChartTooltipProps, + type SeriesInfo, +} from './ChartTooltip'; export { EventMarkerLine, type EventMarkerLineProps, @@ -9,6 +14,5 @@ export { } from './EventMarkers'; export { Line, type LineProps } from './Line'; export { ThresholdLine, type ThresholdLineProps } from './ThresholdLine'; -export { type SeriesInfo, Tooltip, type TooltipProps } from './Tooltip'; export { XAxis, type XAxisProps, type XAxisType } from './XAxis'; export { YAxis, type YAxisProps, type YAxisType } from './YAxis'; From 366d1a8c6751ce159371dc8849b22f064dc7e42a Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Thu, 3 Apr 2025 17:13:23 -0700 Subject: [PATCH 5/6] Update prefices in drag-provider package --- charts/drag-provider/src/DragProvider.spec.tsx | 16 ++++++++++------ .../drag-provider/src/DragProvider.stories.tsx | 12 ++++++------ 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/charts/drag-provider/src/DragProvider.spec.tsx b/charts/drag-provider/src/DragProvider.spec.tsx index 0891026ac7..a9597bfe69 100644 --- a/charts/drag-provider/src/DragProvider.spec.tsx +++ b/charts/drag-provider/src/DragProvider.spec.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { ChartCard } from '@lg-charts/chart-card'; import { Chart, - Grid, - Header, + ChartGrid, + ChartHeader, + ChartTooltip, Line, - Tooltip, XAxis, YAxis, } from '@lg-charts/core'; @@ -16,9 +16,13 @@ import { DragProvider } from './DragProvider'; function renderChart(dragId: string) { return ( -
- - + + + void) { onChartReady={onChartReady} style={{ width: '100%', height: '100%' }} > -
- - + + + Date: Thu, 3 Apr 2025 17:26:29 -0700 Subject: [PATCH 6/6] Changesets --- .changeset/charts-core-prefices.md | 8 ++++++++ .changeset/charts-drag-provider-prefices.md | 5 +++++ 2 files changed, 13 insertions(+) create mode 100644 .changeset/charts-core-prefices.md create mode 100644 .changeset/charts-drag-provider-prefices.md diff --git a/.changeset/charts-core-prefices.md b/.changeset/charts-core-prefices.md new file mode 100644 index 0000000000..0d214f2a83 --- /dev/null +++ b/.changeset/charts-core-prefices.md @@ -0,0 +1,8 @@ +--- +'@lg-charts/core': minor +--- + +Updates component names with `Chart*` prefix + - `Grid` → `ChartGrid` + - `Header` → `ChartHeader` + - `Tooltip` → `ChartTooltip` diff --git a/.changeset/charts-drag-provider-prefices.md b/.changeset/charts-drag-provider-prefices.md new file mode 100644 index 0000000000..6e90240497 --- /dev/null +++ b/.changeset/charts-drag-provider-prefices.md @@ -0,0 +1,5 @@ +--- +'@lg-charts/drag-provider': patch +--- + +Updates spec and story files with updated `@lg-charts/core` component names