[charts][POC] Charts

docs/data/charts/composition/PocBaseAndMaterial.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default function PocBaseAndMaterial() {
+  return <div>PocBaseAndMaterial</div>;
+}

docs/data/charts/composition/PocBaseAndMaterial.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { PieChart as PieChartBase } from '@mui/x-charts-base';
+import { PieChart as PieChartMaterial } from '@mui/x-charts-material';
+import type { PieChartProps } from '@mui/x-charts/PieChart';
+
+const data: PieChartProps = {
+  height: 300,
+  enableKeyboardNavigation: true,
+  series: [
+    {
+      arcLabel: 'value',
+      arcLabelMinAngle: 10,
+      innerRadius: '70%',
+      data: [
+        { value: 15, label: 'A' },
+        { value: 20, label: 'B' },
+      ],
+    },
+    {
+      outerRadius: '70%',
+      innerRadius: '40%',
+      cx: '100%',
+      startAngle: 180,
+      arcLabel: 'value',
+      data: [
+        { value: 15, label: 'D', color: 'rgb(135, 120, 255)' },
+        { value: 25, label: 'E', color: 'rgb(160, 143, 255)' },
+        { value: 35, label: 'F', color: 'rgb(185, 166, 255)' },
+      ],
+    },
+    {
+      outerRadius: '70%',
+      innerRadius: '40%',
+      cx: '0%',
+      endAngle: 180,
+      arcLabel: 'value',
+      data: [
+        { value: 15, label: 'D', color: 'rgb(255, 194, 163)' },
+        { value: 25, label: 'E', color: 'rgb(255, 186, 138)' },
+        { value: 35, label: 'F', color: 'rgb(255, 177, 112)' },
+      ],
+    },
+  ],
+};
+
+export default function PocBaseAndMaterial() {
+  return (
+    <div>
+      <PieChartBase.Root {...data}>
+        <PieChartBase.Surface>
+          <PieChartBase.Plot />
+          <PieChartBase.LabelPlot />
+        </PieChartBase.Surface>
+      </PieChartBase.Root>
+      <PieChartMaterial {...data} />
+    </div>
+  );
+}

docs/data/charts/composition/composition.md

@@ -269,3 +269,12 @@
 The bell curve is calculated based on the mean and standard deviation of the data.
 
 {{"demo": "BellCurveOverlay.js" }}
+
+### POC: Base and Material UI packages
+
+This example demonstrates the proposed architecture where charts functionality is split into two packages:
+
+- **@mui/x-charts-base**: Framework-agnostic core with inline styles and a custom theme system
+- **@mui/x-charts-material**: Material UI integration layer using material components and theming
+
+{{"demo": "PocBaseAndMaterial.js" }}

packages/x-charts-base/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@mui/x-charts-base",
+  "version": "0.0.1",
+  "description": "Framework-agnostic base charting library for MUI X Charts",
+  "author": "MUI Team",
+  "main": "src/index.ts",
+  "license": "MIT",
+  "private": true,
+  "bugs": {
+    "url": "https://github.com/mui/mui-x/issues"
+  },
+  "homepage": "https://mui.com/x/react-charts/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "scripts": {
+    "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
+    "build:modern": "node ../../scripts/build.mjs modern",
+    "build:node": "node ../../scripts/build.mjs node",
+    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:types": "node ../../scripts/buildTypes.mjs",
+    "typescript": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@babel/runtime": "catalog:",
+    "@mui/utils": "catalog:",
+    "@mui/material": "catalog:",
+    "@mui/x-charts-vendor": "workspace:^",
+    "@mui/x-internals": "workspace:^",
+    "@mui/x-charts": "workspace:^",
+    "clsx": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {},
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

packages/x-charts-base/src/ChartsSurface/ChartsSurface.tsx

@@ -0,0 +1,74 @@
+'use client';
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import { useSvgRef } from '@mui/x-charts';
+import { ChartsAxesGradients } from '@mui/x-charts/internals/components/ChartsAxesGradients';
+import {
+  selectorChartSvgWidth,
+  selectorChartSvgHeight,
+  selectorChartPropsWidth,
+  selectorChartPropsHeight,
+} from '@mui/x-charts/internals/plugins/corePlugins/useChartDimensions';
+import {
+  selectorChartsIsKeyboardNavigationEnabled,
+  selectorChartsHasFocusedItem,
+} from '@mui/x-charts/internals/plugins/featurePlugins/useChartKeyboardNavigation';
+import { useSelector } from '@mui/x-charts/internals/store/useSelector';
+import clsx from 'clsx';
+import { useStore } from '@mui/x-charts/internals/store/useStore';
+
+export interface ChartsSurfaceProps
+  extends Omit<
+    React.SVGProps<SVGSVGElement>,
+    'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'
+  > {
+  className?: string;
+  title?: string;
+  desc?: string;
+  children?: React.ReactNode;
+}
+
+const ChartsSurface = React.forwardRef<SVGSVGElement, ChartsSurfaceProps>(function ChartsSurface(
+  inProps: ChartsSurfaceProps,
+  ref: React.Ref<SVGSVGElement>,
+) {
+  const store = useStore();
+
+  const svgWidth = useSelector(store, selectorChartSvgWidth);
+  const svgHeight = useSelector(store, selectorChartSvgHeight);
+
+  const propsWidth = useSelector(store, selectorChartPropsWidth);
+  const propsHeight = useSelector(store, selectorChartPropsHeight);
+  const isKeyboardNavigationEnabled = useSelector(store, selectorChartsIsKeyboardNavigationEnabled);
+  const hasFocusedItem = useSelector(store, selectorChartsHasFocusedItem);
+  const svgRef = useSvgRef();
+  const handleRef = useForkRef(svgRef, ref);
+
+  const { children, className, title, desc, ...other } = inProps;
+
+  const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
+
+  const styles = {
+    ...(propsWidth ? { '--chart-surface-width': `${propsWidth}px` } : {}),
+    ...(propsHeight ? { '--chart-surface-height': `${propsHeight}px` } : {}),
+  } as React.CSSProperties;
+
+  return (
+    <svg
+      viewBox={`${0} ${0} ${svgWidth} ${svgHeight}`}
+      className={clsx('ChartsSurface-root', className)}
+      tabIndex={isKeyboardNavigationEnabled ? 0 : undefined}
+      data-has-focused-item={hasFocusedItem || undefined}
+      style={styles}
+      {...other}
+      ref={handleRef}
+    >
+      {title && <title>{title}</title>}
+      {desc && <desc>{desc}</desc>}
+      <ChartsAxesGradients />
+      {hasIntrinsicSize && children}
+    </svg>
+  );
+});
+
+export { ChartsSurface };

packages/x-charts-base/src/ChartsSurface/index.ts

@@ -0,0 +1 @@
+export * from './ChartsSurface';

packages/x-charts-base/src/FakeCss/index.ts

@@ -0,0 +1,49 @@
+import { styled } from '@mui/material';
+
+export const FakeCss = styled('div')(({ theme }) => ({
+  '& .ChartsSurface-root': {
+    height: 'var(--chart-surface-height, 100%)',
+    width: 'var(--chart-surface-width, 100%)',
+    display: 'flex',
+    position: 'relative',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    /* This prevents default touch actions when using the svg on mobile devices.
+       For example, prevent page scroll & zoom. */
+    touchAction: 'pan-y',
+    userSelect: 'none',
+    gridArea: 'chart',
+  },
+
+  '& .ChartsSurface-root:focus': {
+    outline: 'none', // By default don't show focus on the SVG container
+  },
+
+  '& .ChartsSurface-root:focus-visible': {
+    /* Show focus outline on the SVG container only when using keyboard navigation */
+    outline: 'var(--mui-palette-text-primary) solid 2px',
+  },
+
+  "& .ChartsSurface-root:focus-visible[data-has-focused-item='true']": {
+    /* But not if the chart has a focused children item */
+    outline: 'none',
+  },
+
+  "& .ChartsSurface-root [data-focused='true']": {
+    outline: 'var(--mui-palette-text-primary) solid 2px',
+  },
+
+  // @media doesn't work
+  '@media (prefers-color-scheme: dark)': {},
+
+  '--Primary-color': 'orange',
+
+  '--PieChart-arc-stroke': 'white',
+  ...theme.applyStyles('dark', {
+    '--PieChart-arc-stroke': 'black',
+  }),
+
+  '--FocusIndicator-color': 'var(--Primary-color)',
+}));

packages/x-charts-base/src/PieChart/PieArc.tsx

@@ -0,0 +1,95 @@
+'use client';
+import { type PieItemId } from '@mui/x-charts';
+import { useInteractionItemProps } from '@mui/x-charts/hooks/useInteractionItemProps';
+import clsx from 'clsx';
+import * as React from 'react';
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+
+export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
+   */
+  skipInteraction?: boolean;
+  id: PieItemId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  stroke?: string;
+};
+
+const PieArc = React.forwardRef<SVGPathElement, PieArcProps>(function PieArc(props, ref) {
+  const {
+    className,
+    color,
+    dataIndex,
+    id,
+    isFaded,
+    isHighlighted,
+    isFocused,
+    onClick,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipInteraction,
+    stroke,
+    ...other
+  } = props;
+
+  const interactionProps = useInteractionItemProps(
+    { type: 'pie', seriesId: id, dataIndex },
+    skipInteraction,
+  );
+  const p = {
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+  };
+
+  const d = d3Arc().cornerRadius(p.cornerRadius)({
+    padAngle: p.paddingAngle,
+    innerRadius: p.innerRadius,
+    outerRadius: p.outerRadius,
+    startAngle: p.startAngle,
+    endAngle: p.endAngle,
+  })!;
+  const visibility = p.startAngle === p.endAngle ? ('hidden' as const) : ('visible' as const);
+
+  return (
+    <path
+      ref={ref}
+      onClick={onClick}
+      cursor={onClick ? 'pointer' : 'unset'}
+      className={clsx('PieArc-root', className)}
+      fill={color}
+      opacity={isFaded ? 0.3 : 1}
+      filter={isHighlighted ? 'brightness(120%)' : 'none'}
+      stroke={stroke}
+      strokeWidth={1}
+      strokeLinejoin="round"
+      data-highlighted={isHighlighted || undefined}
+      data-faded={isFaded || undefined}
+      d={d}
+      visibility={visibility}
+      {...other}
+      {...interactionProps}
+    />
+  );
+});
+
+export { PieArc };