Skip to content

Commit

Permalink
color-work
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexfauquette
alexfauquette committed May 27, 2024
1 parent 87ed51b commit b838a44
Show file tree
Hide file tree
Showing 10 changed files with 194 additions and 22 deletions.
72 changes: 72 additions & 0 deletions docs/data/charts/heat-map/BasicHeatmap.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import * as React from 'react';
import '@mui/x-charts-pro/typeOverloads';
import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
import { HeatmapContainer, HeatmapPlot } from '@mui/x-charts-pro/Heatmap';

export default function BasicHeatmap() {
return (
<HeatmapContainer
height={400}
width={600}
xAxis={[{ scaleType: 'band', data: [1, 2, 3, 4, 5] }]}
yAxis={[
{ scaleType: 'band', data: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] },
]}
zAxis={[
{
colorMap: {
type: 'continuous',
min: -2,
max: 4,
color: ['green', 'orange'],
},
},
]}
series={[
{
type: 'heatmap',
data: [
[0, 0, 1],
[0, 1, 2],
[0, 2, 3],
[0, 3, 4],
[0, 4, 1],
[0, 5, 2],
[0, 6, 3],
[1, 0, 4],
[1, 1, 1],
[1, 2, 2],
[1, 3, 3],
[1, 4, 4],
[1, 5, 1],
[1, 6, 2],
[2, 0, 3],
[2, 1, 4],
[2, 2, 1],
[2, 3, 2],
[2, 4, 3],
[2, 5, 4],
[2, 6, 1],
[3, 0, 2],
[3, 1, 3],
[3, 2, 4],
[3, 3, 1],
[3, 4, 2],
[3, 5, 3],
[3, 6, 4],
[4, 0, 1],
[4, 1, 2],
[4, 2, 3],
[4, 3, 1],
[4, 4, 2],
[4, 5, 3],
[4, 6, 4],
],
},
]}
>
<ChartsAxis />
<HeatmapPlot />
</HeatmapContainer>
);
}
78 changes: 78 additions & 0 deletions docs/data/charts/heat-map/BasicHeatmap.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import * as React from 'react';
import '@mui/x-charts-pro/typeOverloads';
import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
import { HeatmapContainer, HeatmapPlot } from '@mui/x-charts-pro/Heatmap';

export default function BasicHeatmap() {
return (
<HeatmapContainer
height={400}
width={600}
xAxis={[{ scaleType: 'band', data: [1, 2, 3, 4, 5] }]}
yAxis={[
{ scaleType: 'band', data: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] },
]}
zAxis={[
{
id: 'color-map-id',
colorMap: {
type: 'continuous',
min: -2,
max: 4,
color: ['green', 'orange'],
},
},
]}
series={[
{
type: 'heatmap',
data: [
[0, 0, 1],
[0, 1, 2],
[0, 2, 3],
[0, 3, 4],
[0, 4, 1],
[0, 5, 2],
[0, 6, 3],
[1, 0, 4],
[1, 1, 1],
[1, 2, 2],
[1, 3, 3],
[1, 4, 4],
[1, 5, 1],
[1, 6, 2],
[2, 0, 3],
[2, 1, 4],
[2, 2, 1],
[2, 3, 2],
[2, 4, 3],
[2, 5, 4],
[2, 6, 1],
[3, 0, 2],
[3, 1, 3],
[3, 2, 4],
[3, 3, 1],
[3, 4, 2],
[3, 5, 3],
[3, 6, 4],
[4, 0, 1],
[4, 1, 2],
[4, 2, 3],
[4, 3, 1],
[4, 4, 2],
[4, 5, 3],
[4, 6, 4],
],
},
]}
>
<ChartsAxis />
<HeatmapPlot />
<ChartsTooltip
trigger="item"
// {...tooltip} slots={slots} slotProps={slotProps}
/>
</HeatmapContainer>
);
}
2 changes: 2 additions & 0 deletions docs/data/charts/heat-map/heat-map.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,5 @@ The Heatmap Chart component isn't available yet, but you can upvote [**this GitH
Don't hesitate to leave a comment there to influence what gets built.
Especially if you already have a use case for this component, or if you're facing a pain point with your current solution.
:::

{{"demo": "BasicHeatmap.js"}}
7 changes: 6 additions & 1 deletion packages/x-charts-pro/src/Heatmap/HeatmapContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
ZAxisContextProvider,
} from '@mui/x-charts/internals';
import { AllSeriesType } from '@mui/x-charts/models';
import { ZAxisContextProviderProps } from 'packages/x-charts/build';
import { ZAxisContextProviderProps } from '@mui/x-charts/context';

export type HeatmapContainerProps = Omit<
ChartsSurfaceProps &
Expand Down Expand Up @@ -49,9 +49,14 @@ const yExtremumGetters = {
const formatSeries: SeriesFormatterType<'heatmap'> = (series: AllSeriesType[]) => {
// Group series by type
const seriesGroups: { heatmap?: FormatterParams<'heatmap'> } = {};

series.forEach((seriesData, seriesIndex: number) => {
const { id = `auto-generated-id-${seriesIndex}`, type } = seriesData;

if (type !== 'heatmap') {
throw new Error('Heatmap does nto suport other series type that "heatmap"');
}

if (seriesGroups[type] === undefined) {
seriesGroups[type] = { series: {}, seriesOrder: [] };
}
Expand Down
2 changes: 1 addition & 1 deletion packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function HeatmapPlot() {
height={yScale.bandwidth()}
x={xScale(xDomain[xIndex])}
y={yScale(yDomain[yIndex])}
fill={colorScale(value)}
fill={colorScale(value) ?? undefined}
/>
);
})}
Expand Down
5 changes: 3 additions & 2 deletions packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,19 +78,20 @@ function ChartsAxisTooltipContent(props: {

let getColor: (index: number) => string;
switch (seriesToAdd.type) {
case 'scatter':
case 'line':
case 'bar':
getColor = colorGetter(
seriesToAdd,
xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]],
yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]],
zAxis[seriesToAdd.zAxisKey ?? zAxisIds[0]],
);
break;
default:
getColor = colorGetter(
seriesToAdd,
xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]],
yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]],
zAxis[seriesToAdd.zAxisKey ?? zAxisIds[0]],
);
break;
}
Expand Down
6 changes: 4 additions & 2 deletions packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,24 +53,26 @@ function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {
const defaultYAxisId = yAxisIds[0];
const defaultZAxisId = zAxisIds[0];


let getColor: (index: number) => string;
switch (series.type) {
case 'pie':
getColor = colorGetter(series);
break;
case 'scatter':
case 'line':
case 'bar':
getColor = colorGetter(
series,
xAxis[series.xAxisKey ?? defaultXAxisId],
yAxis[series.yAxisKey ?? defaultYAxisId],
zAxis[series.zAxisKey ?? defaultZAxisId],
);
break;
default:
getColor = colorGetter(
series,
xAxis[series.xAxisKey ?? defaultXAxisId],
yAxis[series.yAxisKey ?? defaultYAxisId],
zAxis[series.zAxisKey ?? defaultZAxisId],
);
break;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function DefaultChartsItemTooltipContent<T extends ChartSeriesType = ChartSeries
displayedLabel: getLabel(series.data[itemData.dataIndex].label, 'tooltip'),
}
: {
color: getColor(itemData.dataIndex) ?? series.color,
color: getColor(itemData.dataIndex),
displayedLabel: getLabel(series.label, 'tooltip'),
};

Expand Down
2 changes: 1 addition & 1 deletion packages/x-charts/src/ChartsTooltip/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export function getTooltipHasData(
}

export function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType {
return ['bar', 'line', 'scatter'].includes(seriesType);
return ['bar', 'line', 'scatter', 'heatmap'].includes(seriesType);
}

export function isCartesianSeries(
Expand Down
40 changes: 26 additions & 14 deletions packages/x-charts/src/internals/colorGetter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,31 @@ import getBarColor from '../BarChart/getColor';
import getLineColor from '../LineChart/getColor';
import getScatterColor from '../ScatterChart/getColor';
import getPieColor from '../PieChart/getColor';
import {
DefaultizedBarSeriesType,
DefaultizedLineSeriesType,
DefaultizedPieSeriesType,
DefaultizedScatterSeriesType,
} from '../models';
import { DefaultizedSeriesType } from '../models';
import { AxisDefaultized } from '../models/axis';
import { ZAxisDefaultized } from '../models/z-axis';

function getColor(series: DefaultizedPieSeriesType): (dataIndex: number) => string;
export type ColorGetterType = (
series: DefaultizedSeriesType,
xAxis?: AxisDefaultized,
yAxis?: AxisDefaultized,
zAxis?: ZAxisDefaultized,
) => string;

function getColor(series: DefaultizedSeriesType<'pie'>): (dataIndex: number) => string;
function getColor(
series: DefaultizedBarSeriesType | DefaultizedLineSeriesType,
series: DefaultizedSeriesType<'line' | 'bar'>,
xAxis: AxisDefaultized,
yAxis: AxisDefaultized,
): (dataIndex: number) => string;
function getColor(
series: DefaultizedScatterSeriesType,
series: DefaultizedSeriesType<'scatter'>,
xAxis: AxisDefaultized,
yAxis: AxisDefaultized,
zAxis?: ZAxisDefaultized,
): (dataIndex: number) => string;
function getColor(
series:
| DefaultizedBarSeriesType
| DefaultizedLineSeriesType
| DefaultizedScatterSeriesType
| DefaultizedPieSeriesType,
series: DefaultizedSeriesType,
xAxis?: AxisDefaultized,
yAxis?: AxisDefaultized,
zAxis?: ZAxisDefaultized,
Expand All @@ -50,6 +48,20 @@ function getColor(
return getPieColor(series);
}

if (series.type === 'heatmap') {
const colorScale = zAxis?.colorScale;

if (colorScale) {
return (dataIndex: number) => {
const value = series.data[dataIndex][2];
if (value !== undefined) {
return colorScale(value) ?? '';
}
return '';
};
}
}

throw Error(
`MUI X Charts: getColor called with unexpected arguments for series with id "${series.id}"`,
);
Expand Down

0 comments on commit b838a44

Please sign in to comment.