From 8df6c4d1c8f890d0d880166c8ac23e1a36d9cdd5 Mon Sep 17 00:00:00 2001
From: Alexander Lesnenko <alxnddr@users.noreply.github.com>
Date: Wed, 27 Oct 2021 12:22:25 +0300
Subject: [PATCH] tune static viz appearance (#18686)
---
.../CategoricalAreaChart/CategoricalAreaChart.jsx | 4 ++++
.../CategoricalBarChart/CategoricalBarChart.jsx | 4 ++++
.../CategoricalLineChart/CategoricalLineChart.jsx | 4 ++++
.../TimeSeriesAreaChart/TimeSeriesAreaChart.jsx | 4 ++++
.../components/TimeSeriesBarChart/TimeSeriesBarChart.jsx | 4 ++++
.../TimeSeriesLineChart/TimeSeriesLineChart.jsx | 4 ++++
frontend/src/metabase/static-viz/lib/axes.js | 8 ++++++++
7 files changed, 32 insertions(+)
diff --git a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
index 9d897853af4..5469e3d61bc 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
+++ b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
@@ -11,6 +11,7 @@ import {
getYTickLabelProps,
getYTickWidth,
getXTickHeight,
+ getLabelProps,
} from "../../lib/axes";
import { formatNumber } from "../../lib/numbers";
import { truncateText } from "../../lib/text";
@@ -51,6 +52,7 @@ const layout = {
textMedium: "#949aab",
},
barPadding: 0.2,
+ labelFontWeight: 700,
labelPadding: 12,
maxTickWidth: 100,
areaOpacity: 0.2,
@@ -121,6 +123,7 @@ const CategoricalAreaChart = ({ data, accessors, settings, labels }) => {
labelOffset={yLabelOffset}
hideTicks
hideAxisLine
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatNumber(value, settings?.y)}
tickLabelProps={() => getYTickLabelProps(layout)}
/>
@@ -138,6 +141,7 @@ const CategoricalAreaChart = ({ data, accessors, settings, labels }) => {
numTicks={data.length}
stroke={palette.textLight}
tickStroke={palette.textLight}
+ labelProps={getLabelProps(layout)}
tickComponent={props => <Text {...getXTickProps(props)} />}
tickLabelProps={() => getXTickLabelProps(layout, isVertical)}
/>
diff --git a/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
index 079e48de488..e449947002e 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
+++ b/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
@@ -11,6 +11,7 @@ import {
getYTickLabelProps,
getYTickWidth,
getXTickHeight,
+ getLabelProps,
} from "../../lib/axes";
import { formatNumber } from "../../lib/numbers";
import { truncateText } from "../../lib/text";
@@ -51,6 +52,7 @@ const layout = {
textMedium: "#949aab",
},
barPadding: 0.2,
+ labelFontWeight: 700,
labelPadding: 12,
maxTickWidth: 100,
strokeDasharray: "4",
@@ -125,6 +127,7 @@ const CategoricalBarChart = ({ data, accessors, settings, labels }) => {
labelOffset={yLabelOffset}
hideTicks
hideAxisLine
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatNumber(value, settings?.y)}
tickLabelProps={() => getYTickLabelProps(layout)}
/>
@@ -135,6 +138,7 @@ const CategoricalBarChart = ({ data, accessors, settings, labels }) => {
numTicks={data.length}
stroke={palette.textLight}
tickStroke={palette.textLight}
+ labelProps={getLabelProps(layout)}
tickComponent={props => <Text {...getXTickProps(props)} />}
tickLabelProps={() => getXTickLabelProps(layout, isVertical)}
/>
diff --git a/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
index 0534b7535c2..a0f8135f5e0 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
+++ b/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
@@ -11,6 +11,7 @@ import {
getYTickLabelProps,
getYTickWidth,
getXTickHeight,
+ getLabelProps,
} from "../../lib/axes";
import { formatNumber } from "../../lib/numbers";
import { truncateText } from "../../lib/text";
@@ -51,6 +52,7 @@ const layout = {
textMedium: "#949aab",
},
barPadding: 0.2,
+ labelFontWeight: 700,
labelPadding: 12,
maxTickWidth: 100,
strokeDasharray: "4",
@@ -119,6 +121,7 @@ const CategoricalLineChart = ({ data, accessors, settings, labels }) => {
labelOffset={yLabelOffset}
hideTicks
hideAxisLine
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatNumber(value, settings?.y)}
tickLabelProps={() => getYTickLabelProps(layout)}
/>
@@ -129,6 +132,7 @@ const CategoricalLineChart = ({ data, accessors, settings, labels }) => {
numTicks={data.length}
stroke={palette.textLight}
tickStroke={palette.textLight}
+ labelProps={getLabelProps(layout)}
tickComponent={props => <Text {...getXTickProps(props)} />}
tickLabelProps={() => getXTickLabelProps(layout, isVertical)}
/>
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
index 20628f1bcd1..13482646f53 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
@@ -5,6 +5,7 @@ import { GridRows } from "@visx/grid";
import { AxisBottom, AxisLeft } from "@visx/axis";
import { AreaClosed, LinePath } from "@visx/shape";
import {
+ getLabelProps,
getXTickLabelProps,
getYTickLabelProps,
getYTickWidth,
@@ -50,6 +51,7 @@ const layout = {
},
numTicks: 5,
strokeWidth: 2,
+ labelFontWeight: 700,
labelPadding: 12,
areaOpacity: 0.2,
strokeDasharray: "4",
@@ -111,6 +113,7 @@ const TimeSeriesAreaChart = ({ data, accessors, settings, labels }) => {
labelOffset={yLabelOffset}
hideTicks
hideAxisLine
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatNumber(value, settings?.y)}
tickLabelProps={() => getYTickLabelProps(layout)}
/>
@@ -121,6 +124,7 @@ const TimeSeriesAreaChart = ({ data, accessors, settings, labels }) => {
numTicks={layout.numTicks}
stroke={palette.textLight}
tickStroke={palette.textLight}
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatDate(value, settings?.x)}
tickLabelProps={() => getXTickLabelProps(layout)}
/>
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
index 204d73a77b1..1f900275a1f 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
@@ -5,6 +5,7 @@ import { GridRows } from "@visx/grid";
import { scaleBand, scaleLinear } from "@visx/scale";
import { Bar } from "@visx/shape";
import {
+ getLabelProps,
getXTickLabelProps,
getYTickLabelProps,
getYTickWidth,
@@ -49,6 +50,7 @@ const layout = {
},
numTicks: 5,
barPadding: 0.2,
+ labelFontWeight: 700,
labelPadding: 12,
strokeDasharray: "4",
};
@@ -106,6 +108,7 @@ const TimeSeriesBarChart = ({ data, accessors, settings, labels }) => {
labelOffset={yLabelOffset}
hideTicks
hideAxisLine
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatNumber(value, settings?.y)}
tickLabelProps={() => getYTickLabelProps(layout)}
/>
@@ -116,6 +119,7 @@ const TimeSeriesBarChart = ({ data, accessors, settings, labels }) => {
numTicks={layout.numTicks}
stroke={palette.textLight}
tickStroke={palette.textLight}
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatDate(value, settings?.x)}
tickLabelProps={() => getXTickLabelProps(layout)}
/>
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
index a1ff189f9e8..ed8da17fc77 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
@@ -8,6 +8,7 @@ import {
getXTickLabelProps,
getYTickWidth,
getYTickLabelProps,
+ getLabelProps,
} from "../../lib/axes";
import { formatDate } from "../../lib/dates";
import { formatNumber } from "../../lib/numbers";
@@ -48,6 +49,7 @@ const layout = {
textMedium: "#949aab",
},
numTicks: 5,
+ labelFontWeight: 700,
labelPadding: 12,
strokeWidth: 2,
strokeDasharray: "4",
@@ -101,6 +103,7 @@ const TimeSeriesLineChart = ({ data, accessors, settings, labels }) => {
labelOffset={yLabelOffset}
hideTicks
hideAxisLine
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatNumber(value, settings?.y)}
tickLabelProps={() => getYTickLabelProps(layout)}
/>
@@ -111,6 +114,7 @@ const TimeSeriesLineChart = ({ data, accessors, settings, labels }) => {
numTicks={layout.numTicks}
stroke={palette.textLight}
tickStroke={palette.textLight}
+ labelProps={getLabelProps(layout)}
tickFormat={value => formatDate(value, settings?.x)}
tickLabelProps={() => getXTickLabelProps(layout)}
/>
diff --git a/frontend/src/metabase/static-viz/lib/axes.js b/frontend/src/metabase/static-viz/lib/axes.js
index 267dbe721c3..45afc674c01 100644
--- a/frontend/src/metabase/static-viz/lib/axes.js
+++ b/frontend/src/metabase/static-viz/lib/axes.js
@@ -36,3 +36,11 @@ export const getYTickLabelProps = layout => ({
fill: layout.colors.textMedium,
textAnchor: "end",
});
+
+export const getLabelProps = layout => ({
+ fontWeight: layout.labelFontWeight,
+ fontSize: layout.font.size,
+ fontFamily: layout.font.family,
+ fill: layout.colors.textMedium,
+ textAnchor: "middle",
+});
--
GitLab