@mui/x-charts 6.0.0-alpha.1 → 6.0.0-alpha.3

package/modern/hooks/useAxisEvents.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SVGContext, DrawingContext } from '../context/DrawingProvider';
-import { isBandScale } from './useScale';
+import { isBandScale } from '../internals/isBandScale';
 export const useAxisEvents = disableAxisListener => {
   const svgRef = React.useContext(SVGContext);
   const {
@@ -109,12 +109,17 @@ export const useAxisEvents = disableAxisListener => {
       });
     };
     const handleMouseMove = event => {
+      // Get mouse coordinate in global SVG space
+      const pt = svgRef.current.createSVGPoint();
+      pt.x = event.clientX;
+      pt.y = event.clientY;
+      const svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
       mousePosition.current = {
-        x: event.offsetX,
-        y: event.offsetY
+        x: svgPt.x,
+        y: svgPt.y
       };
-      const outsideX = event.offsetX < left || event.offsetX > left + width;
-      const outsideY = event.offsetY < top || event.offsetY > top + height;
+      const outsideX = svgPt.x < left || svgPt.x > left + width;
+      const outsideY = svgPt.y < top || svgPt.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
           type: 'updateAxis',
@@ -125,8 +130,8 @@ export const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdateX(event.offsetX);
-      const newStateY = getUpdateY(event.offsetY);
+      const newStateX = getUpdateX(svgPt.x);
+      const newStateY = getUpdateY(svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/modern/hooks/useDrawingArea.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { DrawingContext } from '../context/DrawingProvider';
+export function useDrawingArea() {
+  const {
+    left,
+    top,
+    width,
+    height
+  } = React.useContext(DrawingContext);
+  return React.useMemo(() => ({
+    left,
+    top,
+    width,
+    height
+  }), [height, left, top, width]);
+}

package/modern/hooks/useScale.js

@@ -1,24 +1,6 @@
-import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from 'd3-scale';
-export function getScale(scaleType, domain, range) {
-  switch (scaleType) {
-    case 'log':
-      return scaleLog(domain, range);
-    case 'pow':
-      return scalePow(domain, range);
-    case 'sqrt':
-      return scaleSqrt(domain, range);
-    case 'time':
-      return scaleTime(domain, range);
-    case 'utc':
-      return scaleUtc(domain, range);
-    default:
-      return scaleLinear(domain, range);
-  }
-}
-export function isBandScale(scale) {
-  return scale.bandwidth !== undefined;
-}
-
+import * as React from 'react';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { isBandScale } from '../internals/isBandScale';
 /**
  * For a given scale return a function that map value to their position.
  * Usefull when dealing with specific scale such as band.
@@ -30,4 +12,20 @@ export function getValueToPositionMapper(scale) {
     return value => scale(value) + scale.bandwidth() / 2;
   }
   return value => scale(value);
+}
+export function useXScale(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = React.useContext(CartesianContext);
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id].scale;
+}
+export function useYScale(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = React.useContext(CartesianContext);
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id].scale;
 }

package/modern/hooks/useTicks.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isBandScale } from './useScale';
+import { isBandScale } from '../internals/isBandScale';
 export function getTicksNumber(params) {
   const {
     maxTicks = 999,
@@ -20,15 +20,25 @@ function useTicks(options) {
     // band scale
     if (isBandScale(scale)) {
       const domain = scale.domain();
-      return [...domain.map(value => ({
+      if (scale.bandwidth() > 0) {
+        // scale type = 'band'
+        return [...domain.map((value, index) => ({
+          formattedValue: valueFormatter?.(value) ?? value,
+          offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+          labelOffset: scale.step() / 2
+        })), {
+          formattedValue: undefined,
+          offset: scale.range()[1],
+          labelOffset: 0
+        }];
+      }
+
+      // scale type = 'point'
+      return domain.map(value => ({
         formattedValue: valueFormatter?.(value) ?? value,
-        offset: scale(value) ?? 0,
-        labelOffset: scale.bandwidth() / 2
-      })), ...(scale.bandwidth() > 0 ? [{
-        formattedValue: undefined,
-        offset: scale.range()[1],
+        offset: scale(value),
         labelOffset: 0
-      }] : [])];
+      }));
     }
     return scale.ticks(ticksNumber).map(value => ({
       formattedValue: valueFormatter?.(value) ?? scale.tickFormat(ticksNumber)(value),

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.1
+ * @mui/x-charts v6.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7,6 +7,7 @@
  */
 export * from './constants';
 export * from './context';
+export * from './hooks';
 export * from './colorPalettes';
 export * from './models';
 export * from './ChartsClipPath';
@@ -17,6 +18,7 @@ export * from './ChartsTooltip';
 export * from './ChartsAxisHighlight';
 export * from './BarChart';
 export * from './LineChart';
+export * from './PieChart';
 export * from './ScatterChart';
 export * from './ChartContainer';
 export * from './ResponsiveChartContainer';

package/modern/internals/defaultizeColor.js

@@ -1,6 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const DEFAULT_COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
 export function defaultizeColor(series, seriesIndex, colors = DEFAULT_COLORS) {
+  if (series.type === 'pie') {
+    return _extends({}, series, {
+      data: series.data.map((d, index) => _extends({
+        color: colors[index % colors.length]
+      }, d))
+    });
+  }
   return _extends({
     color: colors[seriesIndex % colors.length]
   }, series);

package/modern/internals/getScale.js

@@ -0,0 +1,17 @@
+import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from 'd3-scale';
+export function getScale(scaleType, domain, range) {
+  switch (scaleType) {
+    case 'log':
+      return scaleLog(domain, range);
+    case 'pow':
+      return scalePow(domain, range);
+    case 'sqrt':
+      return scaleSqrt(domain, range);
+    case 'time':
+      return scaleTime(domain, range);
+    case 'utc':
+      return scaleUtc(domain, range);
+    default:
+      return scaleLinear(domain, range);
+  }
+}

package/modern/internals/isBandScale.js

@@ -0,0 +1,3 @@
+export function isBandScale(scale) {
+  return scale.bandwidth !== undefined;
+}

package/modern/models/axis.js

@@ -1 +1,6 @@
-export {};
+export function isBandScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType === 'band';
+}
+export function isPointScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType === 'point';
+}

package/modern/models/seriesType/index.js

@@ -1,12 +1,5 @@
-// import { PieSeriesType } from './pie';
-
-// | PieSeriesType;
-
-// | PieSeriesType;
-
-// | PieSeriesType
-
 export * from './line';
 export * from './bar';
 export * from './scatter';
+export * from './pie';
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.3",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",