LG-5017: update component names with Chart* prefix

.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`

.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

charts/core/README.md

@@ -21,11 +21,11 @@ npm install @lg-charts/core
 ## Basic Chart Example
 
 ```js
-import { Chart, Line, Grid, XAxis, YAxis, type ChartStates } from '@lg-charts/core';
+import { Chart, ChartGrid, ChartHeader, Line, XAxis, YAxis, type ChartStates } from '@lg-charts/core';
 
 <Chart onZoomSelect={handleZoom} state={ChartStates.Unset}>
-  <Header title="My Chart" />
-  <Grid vertical={false}>
+  <ChartHeader title="My Chart" />
+  <ChartGrid vertical={false}>
   <XAxis type="time" />
   <YAxis type="value" formatter={(value) => `${value}GB`} />
   <EventMarkerPoint
@@ -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.
 
@@ -120,7 +120,7 @@ Component for rendering a header in a chart.
 | `showDivider` _(optional)_   | When true, renders a dividing line on top of header. Useful when stacking charts, such as in a `ChartGroup`.                                          | `boolean`         |         |
 | `headerContent` _(optional)_ | Content that will be rendered to the right of the title. Useful for adding components such as `IconButton`'s that control functionality in the chart. | `React.ReactNode` |         |
 
-### `Grid`
+### `ChartGrid`
 
 Component that displays grid lines on the chart.
 
@@ -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.
 

charts/core/src/Chart.stories.tsx

@@ -3,22 +3,22 @@ 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 { TooltipProps } from './Tooltip/Tooltip.types';
+import { ChartHeaderProps } from './ChartHeader/ChartHeader.types';
+import { ChartTooltipProps } from './ChartTooltip/ChartTooltip.types';
 import { LineProps } from './Line';
 import { makeLineData } from './testUtils';
 import { ThresholdLineProps } from './ThresholdLine';
 import {
   Chart,
+  ChartGrid,
+  ChartHeader,
+  ChartTooltip,
   EventMarkerLine,
   EventMarkerLineProps,
   EventMarkerPoint,
   EventMarkerPointProps,
-  Grid,
-  Header,
   Line,
   ThresholdLine,
-  Tooltip,
   XAxis,
   XAxisProps,
   YAxis,
@@ -75,10 +75,10 @@ export const LiveExample: StoryObj<{
   yAxisFormatter: YAxisProps['formatter'];
   yAxisLabel: YAxisProps['label'];
   renderTooltip: boolean;
-  tooltipSeriesValueFormatter: TooltipProps['seriesValueFormatter'];
+  tooltipSeriesValueFormatter: ChartTooltipProps['seriesValueFormatter'];
   renderHeader: boolean;
-  headerTitle: HeaderProps['title'];
-  headerShowDivider: HeaderProps['showDivider'];
+  headerTitle: ChartHeaderProps['title'];
+  headerShowDivider: ChartHeaderProps['showDivider'];
   zoomSelectXAxis: boolean;
   zoomSelectYAxis: boolean;
   zoomSelectCallback;
@@ -150,13 +150,12 @@ export const LiveExample: StoryObj<{
         category: 'Chart',
       },
     },
+    category: 'Chart',
     verticalGridLines: {
       control: 'boolean',
       description: 'Show vertical grid lines',
       name: 'Vertical',
-      table: {
-        category: 'Grid',
-      },
+      table: {},
     },
     horizontalGridLines: {
       control: 'boolean',
@@ -481,7 +480,7 @@ export const LiveExample: StoryObj<{
         state={state}
       >
         {renderHeader && (
-          <Header
+          <ChartHeader
             title={headerTitle}
             showDivider={headerShowDivider}
             headerContent={
@@ -499,10 +498,13 @@ export const LiveExample: StoryObj<{
           />
         )}
         {renderGrid && (
-          <Grid vertical={verticalGridLines} horizontal={horizontalGridLines} />
+          <ChartGrid
+            vertical={verticalGridLines}
+            horizontal={horizontalGridLines}
+          />
         )}
         {renderTooltip && (
-          <Tooltip seriesValueFormatter={tooltipSeriesValueFormatter} />
+          <ChartTooltip seriesValueFormatter={tooltipSeriesValueFormatter} />
         )}
         {renderXAxis && (
           <XAxis
@@ -565,7 +567,7 @@ export const DarkMode: StoryObj<{}> = {
         }}
         state="unset"
       >
-        <Header
+        <ChartHeader
           title="Header"
           showDivider
           headerContent={
@@ -582,8 +584,8 @@ export const DarkMode: StoryObj<{}> = {
             </div>
           }
         />
-        <Grid />
-        <Tooltip />
+        <ChartGrid />
+        <ChartTooltip />
         <XAxis type="time" label="X-Axis Label" />
         <YAxis type="value" label="Y-Axis Label" />
         <ThresholdLine position={1300} label="Cluster Limit" value="1300" />
@@ -617,7 +619,7 @@ export const LoadingState: StoryObj<{}> = {
         }}
         state="loading"
       >
-        <Header
+        <ChartHeader
           title="Header"
           showDivider
           headerContent={
@@ -634,8 +636,8 @@ export const LoadingState: StoryObj<{}> = {
             </div>
           }
         />
-        <Grid />
-        <Tooltip />
+        <ChartGrid />
+        <ChartTooltip />
         <XAxis type="time" label="X-Axis Label" />
         <YAxis type="value" label="Y-Axis Label" />
         <ThresholdLine position={1300} label="Cluster Limit" value="1300" />
@@ -663,7 +665,7 @@ export const OverlayState: StoryObj<{}> = {
   render: () => {
     return (
       <Chart state="overlay">
-        <Header
+        <ChartHeader
           title="Header"
           showDivider
           headerContent={
@@ -680,8 +682,8 @@ export const OverlayState: StoryObj<{}> = {
             </div>
           }
         />
-        <Grid />
-        <Tooltip />
+        <ChartGrid />
+        <ChartTooltip />
         <XAxis type="time" label="X-Axis Label" />
         <YAxis type="value" label="Y-Axis Label" />
         <ThresholdLine position={1300} label="Cluster Limit" value="1300" />
@@ -709,7 +711,7 @@ export const DraggingState: StoryObj<{}> = {
   render: () => {
     return (
       <Chart state="dragging">
-        <Header
+        <ChartHeader
           title="Header"
           showDivider
           headerContent={
@@ -726,8 +728,8 @@ export const DraggingState: StoryObj<{}> = {
             </div>
           }
         />
-        <Grid />
-        <Tooltip />
+        <ChartGrid />
+        <ChartTooltip />
         <XAxis type="time" label="X-Axis Label" />
         <YAxis type="value" label="Y-Axis Label" />
         <ThresholdLine position={1300} label="Cluster Limit" value="1300" />
@@ -765,7 +767,7 @@ export const ResizingWithContainer: StoryObj<{ containerWidth: number }> = {
           }}
           state="unset"
         >
-          <Header
+          <ChartHeader
             title="Header"
             showDivider
             headerContent={
@@ -781,8 +783,8 @@ export const ResizingWithContainer: StoryObj<{ containerWidth: number }> = {
               </div>
             }
           />
-          <Grid />
-          <Tooltip />
+          <ChartGrid />
+          <ChartTooltip />
           <XAxis type="time" label="X-Axis Label" />
           <YAxis type="value" label="Y-Axis Label" />
           <ThresholdLine position={1300} label="Cluster Limit" value="1300" />
@@ -823,7 +825,7 @@ export const WithTooltip: StoryObj<{}> = {
   render: () => {
     return (
       <Chart>
-        <Tooltip />
+        <ChartTooltip />
         {lineData.map(({ name, data }) => (
           <Line name={name} data={data} key={name} />
         ))}
@@ -888,7 +890,7 @@ export const WithGrid: StoryObj<{}> = {
   render: () => {
     return (
       <Chart>
-        <Grid />
+        <ChartGrid />
         {lineData.map(({ name, data }) => (
           <Line name={name} data={data} key={name} />
         ))}
@@ -901,7 +903,7 @@ export const WithVerticalGrid: StoryObj<{}> = {
   render: () => {
     return (
       <Chart>
-        <Grid horizontal={false} />
+        <ChartGrid horizontal={false} />
         {lineData.map(({ name, data }) => (
           <Line name={name} data={data} key={name} />
         ))}
@@ -914,7 +916,7 @@ export const WithHorizontalGrid: StoryObj<{}> = {
   render: () => {
     return (
       <Chart>
-        <Grid vertical={false} />
+        <ChartGrid vertical={false} />
         {lineData.map(({ name, data }) => (
           <Line name={name} data={data} key={name} />
         ))}
@@ -927,7 +929,7 @@ export const WithHeader: StoryObj<{}> = {
   render: () => {
     return (
       <Chart>
-        <Header title="Header" />
+        <ChartHeader title="Header" />
         {lineData.map(({ name, data }) => (
           <Line name={name} data={data} key={name} />
         ))}
@@ -940,7 +942,7 @@ export const WithHeaderAndDivider: StoryObj<{}> = {
   render: () => {
     return (
       <Chart>
-        <Header title="Header" showDivider />
+        <ChartHeader title="Header" showDivider />
         {lineData.map(({ name, data }) => (
           <Line name={name} data={data} key={name} />
         ))}
@@ -953,7 +955,7 @@ export const WithHeaderContent: StoryObj<{}> = {
   render: () => {
     return (
       <Chart>
-        <Header
+        <ChartHeader
           title="Header"
           showDivider
           headerContent={
@@ -1062,6 +1064,23 @@ export const WithWarningEventMarkerLine: StoryObj<{}> = {
   },
 };
 
+export const WithZoomAndTooltip: StoryObj<{}> = {
+  render: () => {
+    return (
+      <Chart
+        zoomSelect={{
+          xAxis: true,
+          yAxis: true,
+        }}
+      >
+        {lineData.map(({ name, data }) => (
+          <Line name={name} data={data} key={name} />
+        ))}
+      </Chart>
+    );
+  },
+};
+
 export const WithZoom: StoryObj<{}> = {
   render: () => {
     return (
@@ -1118,13 +1137,13 @@ export const SyncedByGroupID: StoryObj<{}> = {
         style={{ display: 'grid', gridTemplateColumns: '1fr', width: '100%' }}
       >
         <Chart groupId="group1">
-          <Tooltip />
+          <ChartTooltip />
           {lineData.map(({ name, data }) => (
             <Line name={name} data={data} key={name} />
           ))}
         </Chart>
         <Chart groupId="group1">
-          <Tooltip />
+          <ChartTooltip />
           {lineData.map(({ name, data }) => (
             <Line name={name} data={data} key={name} />
           ))}

charts/core/src/Chart/Chart.tsx

@@ -80,10 +80,10 @@ 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.
+             * used to add components like Line, ChartGrid, etc.
              */}
             {children}
           </div>

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: {

charts/core/src/Grid/Grid.tsx → charts/core/src/ChartGrid/ChartGrid.tsx

@@ -6,15 +6,18 @@ 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: {
     show: false,
   },
 };
 
-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';

charts/core/src/Grid/Grid.types.ts → charts/core/src/ChartGrid/ChartGrid.types.ts

@@ -1,4 +1,4 @@
-export interface GridProps {
+export interface ChartGridProps {
   vertical?: boolean;
   horizontal?: boolean;
 }