From c7a27ffacaf453ac91549725098ad0b161c6589d Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 1 Nov 2023 11:17:51 +0100 Subject: [PATCH 1/9] style: Update line height --- app/components/form.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/components/form.tsx b/app/components/form.tsx index 95bc68f7c..c47d400bf 100644 --- a/app/components/form.tsx +++ b/app/components/form.tsx @@ -463,7 +463,9 @@ const DisabledMessageIcon = (props: DisabledMessageIconProps) => { } placement="top" - componentsProps={{ tooltip: { sx: { width: 140, px: 2, py: 1 } } }} + componentsProps={{ + tooltip: { sx: { width: 140, px: 2, py: 1, lineHeight: 1.2 } }, + }} sx={{ opacity: 1, pointerEvents: "auto", ml: 1 }} > From e765b2f9c2f3ad9f2892afb6bef15b201b4f3145 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 1 Nov 2023 11:18:10 +0100 Subject: [PATCH 2/9] chore: Remove text input from ColorPicker --- .../chart-controls/color-picker.tsx | 51 ++----------------- 1 file changed, 4 insertions(+), 47 deletions(-) diff --git a/app/configurator/components/chart-controls/color-picker.tsx b/app/configurator/components/chart-controls/color-picker.tsx index 7f2a411b1..3691bacad 100644 --- a/app/configurator/components/chart-controls/color-picker.tsx +++ b/app/configurator/components/chart-controls/color-picker.tsx @@ -1,16 +1,8 @@ import { Trans } from "@lingui/macro"; -import { - Box, - Button, - Input, - Popover, - styled, - Theme, - Typography, -} from "@mui/material"; +import { Box, Button, Popover, styled, Theme, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { color as d3Color } from "d3"; -import React, { MouseEventHandler, useCallback, useRef, useState } from "react"; +import { MouseEventHandler, useCallback, useRef } from "react"; import useDisclosure from "@/components/use-disclosure"; import VisuallyHidden from "@/components/visually-hidden"; @@ -75,21 +67,12 @@ const useColorPickerStyles = makeStyles((theme: Theme) => ({ gap: 2, marginBottom: 2, }, - input: { - color: theme.palette.grey[700], - borderColor: theme.palette.divider, - backgroundColor: theme.palette.grey[100], - fontSize: "0.875rem", - "&:focus": { outline: "none", borderColor: theme.palette.primary.main }, - }, })); export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => { - const [inputColorValue, setInputColorValue] = useState(selectedColor); - + const classes = useColorPickerStyles(); const selectColor = useCallback( (_color) => { - setInputColorValue(_color); // Make sure onChange is only called with valid colors const c = d3Color(_color); @@ -97,23 +80,9 @@ export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => { onChange?.(_color); } }, - [onChange, setInputColorValue] - ); - - const formatInputColor = useCallback( - (_color) => { - // Make sure onChange is only called with valid colors - const c = d3Color(_color); - - if (c) { - setInputColorValue(_color); - } - }, - [setInputColorValue] + [onChange] ); - const classes = useColorPickerStyles(); - return ( @@ -128,18 +97,6 @@ export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => { /> ))} - - ) => { - selectColor(e.currentTarget.value); - }} - onBlur={(e) => { - formatInputColor(e.currentTarget.value); - }} - /> - ); }; From 7c1e7ed99b98f17735d4ea8bdf6a23aed1b85e61 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 1 Nov 2023 11:23:30 +0100 Subject: [PATCH 3/9] chore: Remove axis orientation radio buttons --- .../components/chart-options-selector.tsx | 25 +------------------ 1 file changed, 1 insertion(+), 24 deletions(-) diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx index fc1b6955e..f88f48286 100644 --- a/app/configurator/components/chart-options-selector.tsx +++ b/app/configurator/components/chart-options-selector.tsx @@ -939,32 +939,9 @@ const ChartComboLineColumnYField = ( }, }); }} + sx={{ mb: 2 }} /> - - - Axis orientation - - } - /> - - {[ - { value: "right", label: t({ id: "left", message: "Left" }) }, - { value: "left", label: t({ id: "right", message: "Right" }) }, - ].map((d) => ( - - ))} - - - {component && state.state === "CONFIGURING_CHART" && ( - - Reset color palette - + + + • + + ); } else { return ; diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx index 023fd1778..e33d2441a 100644 --- a/app/configurator/components/filters.tsx +++ b/app/configurator/components/filters.tsx @@ -25,7 +25,6 @@ import get from "lodash/get"; import groupBy from "lodash/groupBy"; import keyBy from "lodash/keyBy"; import orderBy from "lodash/orderBy"; -import sortBy from "lodash/sortBy"; import uniqBy from "lodash/uniqBy"; import React, { forwardRef, @@ -83,7 +82,6 @@ import { Icon } from "@/icons"; import SvgIcCheck from "@/icons/components/IcCheck"; import SvgIcChevronRight from "@/icons/components/IcChevronRight"; import SvgIcClose from "@/icons/components/IcClose"; -import SvgIcFormatting from "@/icons/components/IcFormatting"; import SvgIcRefresh from "@/icons/components/IcRefresh"; import { getTimeInterval } from "@/intervals"; import { useLocale } from "@/locales/use-locale"; @@ -303,44 +301,19 @@ const MultiFilterContent = ({ anchorEl?.focus(); }); - const handleUpdateColorMapping = useEvent( - ({ - type, - }: { - type: /** Goes back to original color mapping. */ - | "reset" - /** Shuffles colors to create new, randomized color mapping. */ - | "shuffle"; - }) => { - const values = colorComponent?.values || []; - - switch (type) { - case "reset": - return dispatch({ - type: "CHART_CONFIG_UPDATE_COLOR_MAPPING", - value: { - field, - colorConfigPath, - dimensionIri, - values, - random: false, - }, - }); - case "shuffle": - const usedValues = new Set(values.map((v) => v.value)); - return dispatch({ - type: "CHART_CONFIG_UPDATE_COLOR_MAPPING", - value: { - field, - colorConfigPath, - dimensionIri, - values: sortBy(values, (d) => (usedValues.has(d.value) ? 0 : 1)), - random: true, - }, - }); - } - } - ); + const handleResetColorMapping = useEvent(() => { + const values = colorComponent?.values ?? []; + dispatch({ + type: "CHART_CONFIG_UPDATE_COLOR_MAPPING", + value: { + field, + colorConfigPath, + dimensionIri, + values, + random: false, + }, + }); + }); const colorConfig = useMemo(() => { return getColorConfig(chartConfig, colorConfigPath); @@ -400,43 +373,23 @@ const MultiFilterContent = ({ Selected filters - {hasColorMapping ? ( - colorConfig?.palette === "dimension" ? ( - - Reset colors - - } + {hasColorMapping && colorConfig?.palette === "dimension" && ( + + Reset colors + + } + > + - handleUpdateColorMapping({ type: "reset" })} - > - - - - ) : ( - - Refresh colors - - } - > - - handleUpdateColorMapping({ type: "shuffle" }) - } - > - - - - ) - ) : null} + + + + )} diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index daa80b117..4ba766e8f 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -460,7 +460,7 @@ msgstr "Von" #: app/configurator/components/filters.tsx msgid "controls.filters.select.refresh-colors" -msgstr "Farben auffrischen" +msgstr "Farben mischen" #: app/configurator/components/filters.tsx msgid "controls.filters.select.reset-colors" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index ec4f07405..188c93c92 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -460,7 +460,7 @@ msgstr "From" #: app/configurator/components/filters.tsx msgid "controls.filters.select.refresh-colors" -msgstr "Refresh colors" +msgstr "Shuffle colors" #: app/configurator/components/filters.tsx msgid "controls.filters.select.reset-colors" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 1ea2422a7..1118f13e6 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -460,7 +460,7 @@ msgstr "Du" #: app/configurator/components/filters.tsx msgid "controls.filters.select.refresh-colors" -msgstr "Renouveller les couleurs" +msgstr "Mélanger les couleurs" #: app/configurator/components/filters.tsx msgid "controls.filters.select.reset-colors" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index 1224ad2fa..558b9730f 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -460,7 +460,7 @@ msgstr "Della" #: app/configurator/components/filters.tsx msgid "controls.filters.select.refresh-colors" -msgstr "Aggiorna i colori" +msgstr "Mescolare i colori" #: app/configurator/components/filters.tsx msgid "controls.filters.select.reset-colors" From b174a8422f528a0fdaca5e02e01c98e0b7019c00 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 1 Nov 2023 14:54:28 +0100 Subject: [PATCH 7/9] fix: Margin issue (filters) --- app/configurator/components/filters.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx index e33d2441a..81d9dda2c 100644 --- a/app/configurator/components/filters.tsx +++ b/app/configurator/components/filters.tsx @@ -591,7 +591,6 @@ const TreeAccordion = ({ className={classes.optionCheck} style={{ visibility: state === "NOT_SELECTED" ? "hidden" : "visible", - marginTop: 8, }} /> From ecba93ef2af13878e6b250f574bc8ff39b7cfbfc Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 2 Nov 2023 10:38:36 +0100 Subject: [PATCH 8/9] refactor: Remove unnecessary callback --- .../components/chart-controls/color-picker.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/app/configurator/components/chart-controls/color-picker.tsx b/app/configurator/components/chart-controls/color-picker.tsx index 3691bacad..bef45f894 100644 --- a/app/configurator/components/chart-controls/color-picker.tsx +++ b/app/configurator/components/chart-controls/color-picker.tsx @@ -2,7 +2,7 @@ import { Trans } from "@lingui/macro"; import { Box, Button, Popover, styled, Theme, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { color as d3Color } from "d3"; -import { MouseEventHandler, useCallback, useRef } from "react"; +import { MouseEventHandler, useRef } from "react"; import useDisclosure from "@/components/use-disclosure"; import VisuallyHidden from "@/components/visually-hidden"; @@ -71,17 +71,6 @@ const useColorPickerStyles = makeStyles((theme: Theme) => ({ export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => { const classes = useColorPickerStyles(); - const selectColor = useCallback( - (_color) => { - // Make sure onChange is only called with valid colors - const c = d3Color(_color); - - if (c) { - onChange?.(_color); - } - }, - [onChange] - ); return ( @@ -91,9 +80,7 @@ export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => { key={color} color={color} selected={color === selectedColor} - onClick={() => { - selectColor(color); - }} + onClick={() => onChange?.(color)} /> ))} From c8b119bb2f3466399d24fe38f2f772969d9ad416 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 2 Nov 2023 10:39:59 +0100 Subject: [PATCH 9/9] perf: useCallback --- app/charts/combo/chart-combo-line-single.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/charts/combo/chart-combo-line-single.tsx b/app/charts/combo/chart-combo-line-single.tsx index 5c110ae14..49db67896 100644 --- a/app/charts/combo/chart-combo-line-single.tsx +++ b/app/charts/combo/chart-combo-line-single.tsx @@ -83,6 +83,13 @@ export const ChartComboLineSingle = React.memo( const { chartConfig, measures } = props; const { interactiveFiltersConfig } = chartConfig; + const getLegendItemDimension = React.useCallback( + (label) => { + return measures.find((measure) => measure.label === label); + }, + [measures] + ); + return ( @@ -100,9 +107,7 @@ export const ChartComboLineSingle = React.memo( { - return measures.find((measure) => measure.label === label); - }} + getLegendItemDimension={getLegendItemDimension} />