LG-5588 more chart customization points

.changeset/rotten-parrots-stare.md

@@ -0,0 +1,5 @@
+---
+'@lg-charts/core': minor
+---
+
+Adds more customization points to charts including 'axisPointer' prop for ChartTooltip, 'emphasis' prop for Bar, and 'type' prop for XAxis.

.gitignore

@@ -1,6 +1,7 @@
 # IDE files
 .idea
 *.iml
+.vscode
 
 # Locally-installed dependencies
 node_modules/

charts/core/src/Chart.stories.tsx

@@ -5,7 +5,7 @@ import type { StoryObj } from '@storybook/react';
 import { ChartProps } from './Chart/Chart.types';
 import { ChartHeaderProps } from './ChartHeader/ChartHeader.types';
 import { ChartTooltipProps } from './ChartTooltip/ChartTooltip.types';
-import { Bar, LineProps } from './Series';
+import { Bar, BarProps, LineProps } from './Series';
 import { makeSeriesData } from './testUtils';
 import { ThresholdLineProps } from './ThresholdLine';
 import {
@@ -894,10 +894,10 @@ export const _Line: StoryObj<{}> = {
 };
 
 export const _Bar: StoryObj<{}> = {
-  name: 'Bar',
   render: () => {
     return (
       <Chart>
+        <ChartTooltip />
         {lowDensitySeriesData.map(({ name, data }) => (
           <Bar name={name} data={data} key={name} />
         ))}
@@ -910,6 +910,7 @@ export const BarStacked: StoryObj<{}> = {
   render: () => {
     return (
       <Chart>
+        <ChartTooltip />
         {lowDensitySeriesData.map(({ name, data }, index) => (
           <Bar
             name={name}
@@ -923,6 +924,86 @@ export const BarStacked: StoryObj<{}> = {
   },
 };
 
+export const BarWithSelfEmphasis: StoryObj<{
+  emphasis: BarProps['emphasis'];
+}> = {
+  args: {
+    emphasis: 'self',
+  },
+  argTypes: {
+    emphasis: {
+      control: 'select',
+      options: ['self', 'none'],
+      defaultValue: 'self',
+    },
+  },
+  render: ({ emphasis }) => {
+    return (
+      <Chart>
+        <ChartTooltip />
+        {lowDensitySeriesData.map(({ name, data }) => (
+          <Bar name={name} data={data} key={name} emphasis={emphasis} />
+        ))}
+      </Chart>
+    );
+  },
+};
+
+export const BarWithNoAxisPointer: StoryObj<{
+  axisPointer: ChartTooltipProps['axisPointer'];
+}> = {
+  args: {
+    axisPointer: 'none',
+  },
+  argTypes: {
+    axisPointer: {
+      control: 'select',
+      options: ['line', 'none'],
+      defaultValue: 'none',
+    },
+  },
+  render: ({ axisPointer }) => {
+    return (
+      <Chart>
+        <ChartTooltip axisPointer={axisPointer} />
+        {lowDensitySeriesData.map(({ name, data }) => (
+          <Bar name={name} data={data} key={name} />
+        ))}
+      </Chart>
+    );
+  },
+};
+
+export const BarWithCategoryAxisLabel: StoryObj<{
+  xAxisType: XAxisProps['type'];
+}> = {
+  args: {
+    xAxisType: 'category',
+  },
+  argTypes: {
+    xAxisType: {
+      control: 'select',
+      options: ['value', 'category'],
+      defaultValue: 'category',
+    },
+  },
+  render: ({ xAxisType }) => {
+    return (
+      <Chart>
+        <XAxis type={xAxisType} />
+        <ChartTooltip />
+        {lowDensitySeriesData.map(({ name, data }) => (
+          <Bar
+            name={name}
+            data={data.map(([_, value], index) => [index, value])}
+            key={name}
+          />
+        ))}
+      </Chart>
+    );
+  },
+};
+
 export const NullValues: StoryObj<{}> = {
   render: () => {
     return (

charts/core/src/ChartTooltip/ChartTooltip.tsx

@@ -18,6 +18,7 @@ export function ChartTooltip({
   seriesValueFormatter,
   seriesNameFormatter,
   sort,
+  axisPointer,
 }: ChartTooltipProps) {
   const {
     chart: {
@@ -117,14 +118,21 @@ export function ChartTooltip({
         /**
          * using `extraCssText` instead of `className` because emotion-defined class
          * didn't have high-enough specificity
+         *
+         * darkreader-ignore-inline-style class helps avoid the darkreader tampering
+         * with the tooltip styles.
          */
-        className: CHART_TOOLTIP_CLASSNAME,
+        className: `${CHART_TOOLTIP_CLASSNAME} darkreader-ignore-inline-style`,
         extraCssText: getRootStylesText(theme),
         borderWidth: 0,
         padding: 0,
         showDelay: 0,
         hideDelay: 0,
         transitionDuration: 0,
+        axisPointer: {
+          type: axisPointer,
+        },
+
         /**
          * Since the formatter trigger is set to 'axis', the seriesData will be
          * an array of objects. Additionally, it should contain axis related
@@ -148,6 +156,7 @@ export function ChartTooltip({
     theme,
     tooltipPinned,
     updateOptions,
+    axisPointer,
   ]);
 
   return null;

charts/core/src/ChartTooltip/ChartTooltip.types.ts

@@ -18,6 +18,12 @@ export interface ChartTooltipProps {
   seriesValueFormatter?: (value: OptionDataValue) => ReactNode;
   seriesNameFormatter?: (name: SeriesName) => ReactNode;
   headerFormatter?: (value: number | string) => ReactNode;
+  /**
+   * Controls the type of axis pointer shown with the tooltip. Default is 'line'
+   * which shows a vertical dashed line on hover. Set to 'none' for bar charts to
+   * avoid the dashed line from being rendered on top of the bars.
+   */
+  axisPointer?: 'none' | 'line';
 }
 
 export interface CallbackSeriesDataPoint extends CallbackDataParams {

charts/core/src/Series/Bar/Bar.tsx

@@ -9,33 +9,33 @@ export type BarProps = SeriesProps & {
    * Stack name for the series. Series with the same stack name are stacked together.
    */
   stack?: string;
+
+  /**
+   * Hover focus behavior for the series.
+   * - `self`: Upon hovering over a bar, all other bars will be dimmed.
+   * - `none`: Other bars will not be affected by the hover.
+   */
+  emphasis?: 'self';
 };
 
-export const Bar = (props: BarProps) => {
+export const Bar = ({ name, data, stack, emphasis }: BarProps) => {
   const options = useCallback<
     (stylingContext: StylingContext) => EChartSeriesOptions['bar']['options']
   >(
     stylingContext => ({
       clip: false,
-      stack: props.stack,
+      stack,
       emphasis: {
-        focus: 'self',
+        focus: emphasis,
       },
       itemStyle: {
         color: stylingContext.seriesColor,
       },
     }),
-    [props.stack],
+    [stack, emphasis],
   );
 
-  return (
-    <Series
-      type={'bar'}
-      name={props.name}
-      data={props.data}
-      options={options}
-    />
-  );
+  return <Series type="bar" name={name} data={data} options={options} />;
 };
 
 Bar.displayName = 'Bar';

charts/core/src/XAxis/XAxis.types.ts

@@ -4,6 +4,13 @@ export const XAxisType = {
   Log: 'log',
   Time: 'time',
   Value: 'value',
+  /**
+   * The 'category' axis type is suitable for discrete types of data like bar charts,
+   * where each label should be aligned directly under its corresponding bar. Without
+   * using 'category', the charting library may automatically determine axis label positions,
+   * which might not correspond to each bar or data point.
+   */
+  Category: 'category',
 } as const;
 type XAxisType = (typeof XAxisType)[keyof typeof XAxisType];