@mui/x-charts 6.0.0-alpha.0 → 6.0.0-alpha.2

package/legacy/context/SeriesContextProvider.js

@@ -4,6 +4,7 @@ import { useTheme } from '@mui/material/styles';
 import barSeriesFormatter from '../BarChart/formatter';
 import scatterSeriesFormatter from '../ScatterChart/formatter';
 import lineSeriesFormatter from '../LineChart/formatter';
+import pieSeriesFormatter from '../PieChart/formatter';
 import { defaultizeColor } from '../internals/defaultizeColor';
 import { blueberryTwilightPalette } from '../colorPalettes';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,8 +12,17 @@ export var SeriesContext = /*#__PURE__*/React.createContext({});
 var seriesTypeFormatter = {
   bar: barSeriesFormatter,
   scatter: scatterSeriesFormatter,
-  line: lineSeriesFormatter
+  line: lineSeriesFormatter,
+  pie: pieSeriesFormatter
 };
+/**
+ * This methods is the interface between what the developper is providing and what compoenents receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if soe line data are modified
+ * It also add defaultized values such as the ids, colors
+ * @param series The array of series provided by devs
+ * @param colors The color palette used to defaultize series colors
+ * @returns An object structuring all the series by type.
+ */
 var formatSeries = function formatSeries(series, colors) {
   // Group series by type
   var seriesGroups = {};

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.0
+ * @mui/x-charts v6.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -17,6 +17,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/legacy/internals/defaultizeColor.js

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

package/legacy/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/models/seriesType/bar.d.ts

@@ -14,5 +14,5 @@ export type BarItemIdentifier = {
     seriesId: DefaultizedBarSeriesType['id'];
     dataIndex: number;
 };
-export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps> {
+export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color'> {
 }

package/models/seriesType/common.d.ts

@@ -11,7 +11,7 @@ export type CommonSeriesType<TValue> = {
     valueFormatter?: (value: TValue) => string;
     highlightScope?: Partial<HighlightScope>;
 };
-export type CommonDefaultizedProps = 'id' | 'color' | 'valueFormatter';
+export type CommonDefaultizedProps = 'id' | 'valueFormatter';
 export type CartesianSeriesType = {
     xAxisKey?: string;
     yAxisKey?: string;

package/models/seriesType/config.d.ts

@@ -1,8 +1,9 @@
 import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier } from './scatter';
 import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from './line';
 import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
+import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType } from './pie';
 import { AxisConfig } from '../axis';
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps, MakeOptional } from '../helpers';
 import { StackingGroupsType } from '../../internals/stackSeries';
 interface ChartsSeriesConfig {
     bar: {
@@ -28,8 +29,18 @@ interface ChartsSeriesConfig {
         series: DefaultizedScatterSeriesType;
         itemIdentifier: ScatterItemIdentifier;
     };
+    pie: {
+        seriesInput: Omit<DefaultizedProps<PieSeriesType, 'id'>, 'data'> & {
+            data: (MakeOptional<PieValueType, 'id'> & {
+                color: string;
+            })[];
+        };
+        series: DefaultizedPieSeriesType;
+        itemIdentifier: PieItemIdentifier;
+    };
 }
-export type ChartSeriesType = 'bar' | 'line' | 'scatter';
+export type CartesianChartSeriesType = 'bar' | 'line' | 'scatter';
+export type ChartSeriesType = 'bar' | 'line' | 'scatter' | 'pie';
 export type ChartSeries<T extends ChartSeriesType> = ChartsSeriesConfig[T] extends {
     canBeStacked: true;
 } ? ChartsSeriesConfig[T]['seriesInput'] & {
@@ -63,4 +74,20 @@ export type FormatterResult<T extends ChartSeriesType> = {
     stackingGroups: StackingGroupsType;
 } : {});
 export type Formatter<T extends ChartSeriesType> = (params: FormatterParams<T>) => FormatterResult<T>;
+export type LegendParams = {
+    /**
+     * The color used in the legend
+     */
+    color: string;
+    /**
+     * The label displayed in the legend
+     */
+    label: string;
+    /**
+     * The identifier of the legend element.
+     * Used for internal purpose such as `key` props
+     */
+    id: string;
+};
+export type LegendGetter<T extends ChartSeriesType> = (series: FormatterResult<T>) => LegendParams[];
 export {};

package/models/seriesType/index.d.ts

@@ -1,13 +1,17 @@
 import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
 import { DefaultizedLineSeriesType, LineItemIdentifier, LineSeriesType } from './line';
 import { DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterSeriesType } from './scatter';
-type AllSeriesType = BarSeriesType | LineSeriesType | ScatterSeriesType;
+import { DefaultizedPieSeriesType, PieSeriesType, PieItemIdentifier, PieValueType } from './pie';
+import { MakeOptional } from '../helpers';
+type AllSeriesType = BarSeriesType | LineSeriesType | ScatterSeriesType | PieSeriesType<MakeOptional<PieValueType, 'id'>>;
 type CartesianSeriesType = BarSeriesType | LineSeriesType | ScatterSeriesType;
 type DefaultizedCartesianSeriesType = DefaultizedBarSeriesType | DefaultizedLineSeriesType | DefaultizedScatterSeriesType;
+type DefaultizedSeriesType = DefaultizedCartesianSeriesType | DefaultizedPieSeriesType;
 type StackableSeriesType = DefaultizedBarSeriesType | DefaultizedLineSeriesType;
-export type SeriesItemIdentifier = BarItemIdentifier | LineItemIdentifier | ScatterItemIdentifier;
+export type SeriesItemIdentifier = BarItemIdentifier | LineItemIdentifier | ScatterItemIdentifier | PieItemIdentifier;
 export * from './line';
 export * from './bar';
 export * from './scatter';
+export * from './pie';
 export type { StackOrderType, StackOffsetType } from './common';
-export type { AllSeriesType, CartesianSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType, };
+export type { AllSeriesType, CartesianSeriesType, DefaultizedSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType, };

package/models/seriesType/index.js

@@ -35,4 +35,15 @@ Object.keys(_scatter).forEach(function (key) {
       return _scatter[key];
     }
   });
+});
+var _pie = require("./pie");
+Object.keys(_pie).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _pie[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _pie[key];
+    }
+  });
 });

package/models/seriesType/line.d.ts

@@ -21,5 +21,5 @@ export type LineItemIdentifier = {
      */
     dataIndex?: number;
 };
-export interface DefaultizedLineSeriesType extends DefaultizedProps<LineSeriesType, CommonDefaultizedProps> {
+export interface DefaultizedLineSeriesType extends DefaultizedProps<LineSeriesType, CommonDefaultizedProps | 'color'> {
 }

package/models/seriesType/pie.d.ts

@@ -1,5 +1,105 @@
-import { CartesianSeriesType, CommonSeriesType } from './common';
-export interface PieSeriesType extends CommonSeriesType<number>, CartesianSeriesType {
+import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
+import { DefaultizedProps } from '../helpers';
+import { CommonDefaultizedProps, CommonSeriesType } from './common';
+export type PieValueType = {
+    id: string | number;
+    value: number;
+    label?: string;
+    color?: string;
+};
+export type DefaultizedPieValueType = PieValueType & D3PieArcDatum<any> & {
+    color: string;
+    formattedValue: string;
+};
+export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
+export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Tdata> {
     type: 'pie';
-    data: number[];
+    data: Tdata[];
+    /**
+     * The radius between circle center and the begining of the arc.
+     * @default 0
+     */
+    innerRadius?: number;
+    /**
+     * The radius between circle center and the end of the arc.
+     * @default R_max The maximal radius that fit into the drawing area.
+     */
+    outerRadius?: number;
+    /**
+     * The radius applied to arc corners (similar to border radius).
+     * @default 0
+     */
+    cornerRadius?: number;
+    /**
+     * The start angle (deg) of the first item.
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * The end angle (deg) of the last item.
+     * @default 360
+     */
+    endAngle?: number;
+    /**
+     * The padding angle (deg) between two arcs.
+     * @default 0
+     */
+    paddingAngle?: number;
+    sortingValues?: ChartsPieSorting;
+    /**
+     * The label displayed into the arc.
+     */
+    arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: DefaultizedPieValueType) => string);
+    /**
+     * The minimal angle required to display the arc label.
+     */
+    arcLabelMinAngle?: number;
+    /**
+     * The x coordinate of the pie center.
+     * @default width/2 the center of the drawing area.
+     */
+    cx?: number;
+    /**
+     * The y coordinate of the pie center.
+     * @default height/2 the center of the drawing area.
+     */
+    cy?: number;
+    /**
+     * Override the arc attibutes when it is highlighted.
+     */
+    highlighted?: {
+        /**
+         * Value added to the default `outerRadius`.
+         * Can be negative. ANd is ignored if you provide a `highlighted.outerRadius` value.
+         */
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+    };
+    /**
+     * Override the arc attibutes when it is faded.
+     */
+    faded?: {
+        /**
+         * Value added to the default `outerRadius`.
+         * Can be negative. ANd is ignored if you provide a `faded.outerRadius` value.
+         */
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+    };
+}
+/**
+ * An object that allows to identify a single pie slice.
+ * Used for item interaction
+ */
+export type PieItemIdentifier = {
+    type: 'pie';
+    seriesId: DefaultizedPieSeriesType['id'];
+    dataIndex: number;
+};
+export interface DefaultizedPieSeriesType extends DefaultizedProps<PieSeriesType, CommonDefaultizedProps> {
+    data: DefaultizedPieValueType[];
 }

package/models/seriesType/scatter.d.ts

@@ -12,7 +12,7 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
     label?: string;
 }
 /**
- * An object that allows to identify a single line.
+ * An object that allows to identify a single scatter item.
  * Used for item interaction
  */
 export type ScatterItemIdentifier = {

package/modern/BarChart/BarChart.js

@@ -43,7 +43,9 @@ function BarChart(props) {
     xAxis: xAxis ?? [{
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'band',
-      data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
+      data: Array.from({
+        length: Math.max(...series.map(s => s.data.length))
+      }, (_, index) => index)
     }],
     yAxis: yAxis,
     colors: colors,
@@ -74,7 +76,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     y: PropTypes.oneOf(['line', 'none'])
   }),
   /**
-   * Indicate which axis to display the the bottom of the charts.
+   * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default xAxisIds[0] The id of the first provided axis
    */
@@ -101,7 +103,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
-   * Indicate which axis to display the the left of the charts.
+   * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default yAxisIds[0] The id of the first provided axis
    */
@@ -121,6 +123,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({
@@ -140,7 +143,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     top: PropTypes.number
   }),
   /**
-   * Indicate which axis to display the the right of the charts.
+   * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default null
    */
@@ -183,7 +186,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
-   * Indicate which axis to display the the top of the charts.
+   * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default null
    */

package/modern/BarChart/legend.js

@@ -0,0 +1,13 @@
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const data = seriesOrder.map(seriesId => ({
+    color: series[seriesId].color,
+    label: series[seriesId].label,
+    id: seriesId
+  }));
+  return data.filter(item => item.label !== undefined);
+};
+export default legendGetter;

package/modern/ChartsAxis/ChartsAxis.js

@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Indicate which axis to display the the bottom of the charts.
+   * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default xAxisIds[0] The id of the first provided axis
    */
@@ -88,7 +88,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * Indicate which axis to display the the left of the charts.
+   * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default yAxisIds[0] The id of the first provided axis
    */
@@ -106,7 +106,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * Indicate which axis to display the the right of the charts.
+   * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default null
    */
@@ -124,7 +124,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
-   * Indicate which axis to display the the top of the charts.
+   * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default null
    */

package/modern/ChartsLegend/ChartsLegend.js

@@ -146,7 +146,8 @@ export function ChartsLegend(inProps) {
   const {
     position,
     direction,
-    offset
+    offset,
+    hidden
   } = props;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, props, {
@@ -154,6 +155,9 @@ export function ChartsLegend(inProps) {
   }));
   const drawingArea = React.useContext(DrawingContext);
   const series = React.useContext(SeriesContext);
+  if (hidden) {
+    return null;
+  }
   const seriesToDisplay = getSeriesToDisplay(series);
   return /*#__PURE__*/_jsx(ChartsLegendRoot, {
     ownerState: {

package/modern/ChartsLegend/utils.js

@@ -1,3 +1,13 @@
+import getBarLegend from '../BarChart/legend';
+import getScatterLegend from '../ScatterChart/legend';
+import getLineLegend from '../LineChart/legend';
+import getPieLegend from '../PieChart/legend';
+const legendGetter = {
+  bar: getBarLegend,
+  scatter: getScatterLegend,
+  line: getLineLegend,
+  pie: getPieLegend
+};
 export function getSeriesToDisplay(series) {
-  return Object.values(series).flatMap(s => s.seriesOrder.map(seriesId => s.series[seriesId])).filter(s => s.label !== undefined);
+  return Object.keys(series).flatMap(seriesType => legendGetter[seriesType](series[seriesType]));
 }

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -81,7 +81,7 @@ export function ChartsAxisTooltipContent(props) {
   const USED_X_AXIS_ID = xAxisIds[0];
   const relevantSeries = React.useMemo(() => {
     const rep = [];
-    Object.keys(series).forEach(seriesType => {
+    Object.keys(series).filter(seriesType => ['bar', 'line', 'scatter'].includes(seriesType)).forEach(seriesType => {
       series[seriesType].seriesOrder.forEach(seriesId => {
         const axisKey = series[seriesType].series[seriesId].xAxisKey;
         if (axisKey === undefined || axisKey === USED_X_AXIS_ID) {

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -13,8 +13,17 @@ export function DefaultChartsItemContent(props) {
   if (itemData.dataIndex === undefined) {
     return null;
   }
-  const displayedLabel = series.label ?? null;
-  const color = series.color;
+  const {
+    displayedLabel,
+    color
+  } = series.type === 'pie' ? {
+    color: series.data[itemData.dataIndex].color,
+    displayedLabel: series.data[itemData.dataIndex].label
+  } : {
+    color: series.color,
+    displayedLabel: series.label
+  };
+
   // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
   // @ts-ignore
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -23,10 +23,10 @@ export const ChartsTooltipRow = styled('tr', {
 })(({
   theme
 }) => ({
-  '&:first-child td': {
+  'tr:first-of-type& td': {
     paddingTop: theme.spacing(1)
   },
-  '&:last-child td': {
+  'tr:last-of-type& td': {
     paddingBottom: theme.spacing(1)
   }
 }));
@@ -38,18 +38,18 @@ export const ChartsTooltipCell = styled('td', {
 }) => ({
   verticalAlign: 'middle',
   color: theme.palette.text.secondary,
-  '&:first-child': {
-    paddingLeft: theme.spacing(2)
-  },
-  '&:last-child': {
-    paddingRight: theme.spacing(2)
-  },
   [`&.${tooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
   [`&.${tooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: theme.palette.text.primary
+  },
+  'td:first-of-type&': {
+    paddingLeft: theme.spacing(2)
+  },
+  'td:last-of-type&': {
+    paddingRight: theme.spacing(2)
   }
 }));
 export const ChartsTooltipMark = styled(Box, {

package/modern/LineChart/LineChart.js

@@ -47,7 +47,9 @@ function LineChart(props) {
     xAxis: xAxis ?? [{
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'point',
-      data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
+      data: Array.from({
+        length: Math.max(...series.map(s => s.data.length))
+      }, (_, index) => index)
     }],
     yAxis: yAxis,
     colors: colors,
@@ -76,7 +78,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     y: PropTypes.oneOf(['line', 'none'])
   }),
   /**
-   * Indicate which axis to display the the bottom of the charts.
+   * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default xAxisIds[0] The id of the first provided axis
    */
@@ -103,7 +105,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
   /**
-   * Indicate which axis to display the the left of the charts.
+   * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default yAxisIds[0] The id of the first provided axis
    */
@@ -123,6 +125,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({
@@ -142,7 +145,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     top: PropTypes.number
   }),
   /**
-   * Indicate which axis to display the the right of the charts.
+   * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
    * @default null
    */
@@ -187,7 +190,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
-   * Indicate which axis to display the the top of the charts.
+   * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
    * @default null
    */

package/modern/LineChart/legend.js

@@ -0,0 +1,13 @@
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const data = seriesOrder.map(seriesId => ({
+    color: series[seriesId].color,
+    label: series[seriesId].label,
+    id: seriesId
+  }));
+  return data.filter(item => item.label !== undefined);
+};
+export default legendGetter;