Skip to content

Commit

Permalink
Improve sparkline cell
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukasMasuch
LukasMasuch committed Jan 6, 2024
1 parent 8a820dd commit d8461f3
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 25 deletions.
47 changes: 34 additions & 13 deletions packages/cells/src/cell.stories.tsx
View file
Expand Up @@ -209,6 +209,23 @@ export const CustomCells: React.VFC = () => {
},
} as SparklineCell;
} else if (col === 2) {
num = row + 1;
const values = range(0, 15).map(() => rand() * 100 - 50);
return {
kind: GridCellKind.Custom,
allowOverlay: false,
copyData: "4",
data: {
kind: "sparkline-cell",
values,
displayValues: values.map(x => Math.round(x).toString()),
color: row % 2 === 0 ? "#77c4c4" : "#D98466",
graphKind: "line",
hideAxis: true,
yAxis: [-50, 50],
},
} as SparklineCell;
} else if (col === 3) {
num = row + 1;
return {
kind: GridCellKind.Custom,
Expand All @@ -222,7 +239,7 @@ export const CustomCells: React.VFC = () => {
yAxis: [-50, 50],
},
} as SparklineCell;
} else if (col === 3) {
} else if (col === 4) {
num = row + 1;
rand();
return {
Expand All @@ -241,7 +258,7 @@ export const CustomCells: React.VFC = () => {
]),
},
} as TagsCell;
} else if (col === 4) {
} else if (col === 5) {
num = row + 1;
rand();
return {
Expand All @@ -256,7 +273,7 @@ export const CustomCells: React.VFC = () => {
name: row % 5 ? undefined : "Bee bb",
},
} as UserProfileCell;
} else if (col === 5) {
} else if (col === 6) {
num = row + 1;
rand();
const d: DropdownCell = {
Expand All @@ -278,7 +295,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 6) {
} else if (col === 7) {
num = row + 1;
rand();
const v = rand();
Expand All @@ -297,7 +314,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 7) {
} else if (col === 8) {
num = row + 1;
rand();
const d: ArticleCell = {
Expand All @@ -310,7 +327,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 8) {
} else if (col === 9) {
num = row + 1;
rand();
const d: SpinnerCell = {
Expand All @@ -322,7 +339,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 9) {
} else if (col === 10) {
num = row + 1;
rand();
const d: DatePickerCell = {
Expand All @@ -337,7 +354,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 10) {
} else if (col === 11) {
num = row + 1;
rand();
const d: DatePickerCell = {
Expand All @@ -352,7 +369,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 11) {
} else if (col === 12) {
num = row + 1;
rand();
const d: DatePickerCell = {
Expand All @@ -367,7 +384,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 12) {
} else if (col === 13) {
num = row + 1;
rand();
const d: LinksCell = {
Expand All @@ -390,7 +407,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 13) {
} else if (col === 14) {
num = row + 1;
rand();
const d: ButtonCell = {
Expand All @@ -412,7 +429,7 @@ export const CustomCells: React.VFC = () => {
},
};
return d;
} else if (col === 14) {
} else if (col === 15) {
const t: TreeViewCell = {
kind: GridCellKind.Custom,
allowOverlay: false,
Expand All @@ -436,7 +453,11 @@ export const CustomCells: React.VFC = () => {
width: 200,
},
{
title: "Sparkline",
title: "Sparkline (area)",
width: 150,
},
{
title: "Sparkline (line)",
width: 150,
},
{
Expand Down
27 changes: 15 additions & 12 deletions packages/cells/src/cells/sparkline-cell.tsx
View file
Expand Up @@ -2,11 +2,12 @@ import { type CustomCell, parseToRgba, type Item, type CustomRenderer, GridCellK

interface SparklineCellProps {
readonly kind: "sparkline-cell";
readonly graphKind?: "line" | "bar";
readonly graphKind?: "line" | "bar" | "area";
readonly values: readonly number[];
readonly displayValues?: readonly string[];
readonly yAxis: Item;
readonly color?: string;
readonly hideAxis?: boolean;
}

export type SparklineCell = CustomCell<SparklineCellProps>;
Expand All @@ -19,7 +20,7 @@ const renderer: CustomRenderer<SparklineCell> = {
draw: (args, cell) => {
const { ctx, theme, rect, hoverAmount, hoverX } = args;
// eslint-disable-next-line prefer-const
let { values, yAxis, color, graphKind = "line", displayValues } = cell.data;
let { values, yAxis, color, graphKind = "area", displayValues, hideAxis } = cell.data;
const [minY, maxY] = yAxis;
if (values.length === 0) return true;

Expand All @@ -34,7 +35,7 @@ const renderer: CustomRenderer<SparklineCell> = {
const delta = maxY - minY;
const zeroY = maxY <= 0 ? y : minY >= 0 ? y + height : y + height * (maxY / delta);
// draw zero
if (minY <= 0 && maxY >= 0) {
if (!hideAxis && minY <= 0 && maxY >= 0) {
ctx.beginPath();
ctx.moveTo(drawX, zeroY);
ctx.lineTo(drawX + width, zeroY);
Expand Down Expand Up @@ -94,17 +95,19 @@ const renderer: CustomRenderer<SparklineCell> = {
ctx.lineTo(rect.x + padX, zeroY);
ctx.closePath();

ctx.globalAlpha = 0.2 + 0.2 * hoverAmount;
const grad = ctx.createLinearGradient(0, y, 0, y + height * 1.4);
grad.addColorStop(0, color ?? theme.accentColor);
if (graphKind === "area") {
ctx.globalAlpha = 0.2 + 0.2 * hoverAmount;
const grad = ctx.createLinearGradient(0, y, 0, y + height * 1.4);
grad.addColorStop(0, color ?? theme.accentColor);

const [r, g, b] = parseToRgba(color ?? theme.accentColor);
grad.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
ctx.fillStyle = grad;
ctx.fill();
ctx.globalAlpha = 1;
const [r, g, b] = parseToRgba(color ?? theme.accentColor);
grad.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
ctx.fillStyle = grad;
ctx.fill();
ctx.globalAlpha = 1;
}

if (hoverX !== undefined && graphKind === "line" && displayValues !== undefined) {
if (hoverX !== undefined && (graphKind === "line" || graphKind === "area") && displayValues !== undefined) {
ctx.beginPath();
const closest = Math.min(values.length - 1, Math.max(0, Math.round((hoverX - padX) / xStep)));
ctx.moveTo(drawX + closest * xStep, rect.y + 1);
Expand Down

0 comments on commit d8461f3

Please sign in to comment.