Skip to content
Snippets Groups Projects
Unverified Commit 8df6c4d1 authored by Alexander Lesnenko's avatar Alexander Lesnenko Committed by GitHub
Browse files

tune static viz appearance (#18686)

parent d18706b5
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 32 additions and 0 deletions
frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
+ 4
− 0
View file @ 8df6c4d1
......@@ -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)}
/>
......
frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
+ 4
− 0
View file @ 8df6c4d1
......@@ -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)}
/>
......
frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
+ 4
− 0
View file @ 8df6c4d1
......@@ -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)}
/>
......
frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
+ 4
− 0
View file @ 8df6c4d1
......@@ -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)}
/>
......
frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
+ 4
− 0
View file @ 8df6c4d1
......@@ -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)}
/>
......
frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
+ 4
− 0
View file @ 8df6c4d1
......@@ -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)}
/>
......
frontend/src/metabase/static-viz/lib/axes.js
+ 8
− 0
View file @ 8df6c4d1
......@@ -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",
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment