From 994570c3b41f5b7ae8d9b61858f297fd644cc323 Mon Sep 17 00:00:00 2001 From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com> Date: Fri, 13 Sep 2024 11:50:44 +0200 Subject: [PATCH 1/5] style: Improved dashboard embed style --- app/components/chart-footnotes.tsx | 2 +- app/components/chart-published.tsx | 46 +++++++++++++++++++++++------- 2 files changed, 37 insertions(+), 11 deletions(-) diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx index 1d574e5e7..d0cd7de9e 100644 --- a/app/components/chart-footnotes.tsx +++ b/app/components/chart-footnotes.tsx @@ -292,7 +292,7 @@ const ChartFootnotesComboLineSingle = ({ ) : null; }; -const VisualizeLink = () => { +export const VisualizeLink = () => { const locale = useLocale(); return ( diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx index bfa429e0f..b0385fba5 100644 --- a/app/components/chart-published.tsx +++ b/app/components/chart-published.tsx @@ -1,5 +1,5 @@ import { Trans } from "@lingui/macro"; -import { Box, Theme } from "@mui/material"; +import { Box, Theme, useMediaQuery } from "@mui/material"; import { makeStyles } from "@mui/styles"; import clsx from "clsx"; import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react"; @@ -10,7 +10,7 @@ import { extractChartConfigsComponentIris } from "@/charts/shared/chart-helpers" import { LoadingStateProvider } from "@/charts/shared/chart-loading-state"; import { isUsingImputation } from "@/charts/shared/imputation"; import { ChartErrorBoundary } from "@/components/chart-error-boundary"; -import { ChartFootnotes } from "@/components/chart-footnotes"; +import { ChartFootnotes, VisualizeLink } from "@/components/chart-footnotes"; import { ChartPanelLayout, ChartWrapper } from "@/components/chart-panel"; import { ChartControls, @@ -53,6 +53,7 @@ import { InteractiveFiltersChartProvider, InteractiveFiltersProvider, } from "@/stores/interactive-filters"; +import { theme } from "@/themes/federal"; type ChartPublishedProps = { configKey?: string; @@ -107,6 +108,11 @@ export const ChartPublished = (props: ChartPublishedProps) => { const { dataSource } = state; const locale = useLocale(); const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []); + + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); + const isTablet = !isMobile && !isDesktop; + const renderChart = useCallback( (chartConfig: ChartConfig) => ( { [configKey, dataSource, metadataPanelStore, state] ); + const getPadding = () => { + if (isDesktop) return 32; + if (isTablet) return 24; + if (isMobile) return "24px 16px 8px 16px"; + }; + return ( {state.layout.type === "dashboard" ? ( - <> + { )} - - - + + + + + ) : ( <> Date: Fri, 13 Sep 2024 14:33:52 +0200 Subject: [PATCH 2/5] fix: Improved styling using mui utlities --- app/components/chart-published.tsx | 42 ++++++++++++------------------ 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx index b0385fba5..44990b41c 100644 --- a/app/components/chart-published.tsx +++ b/app/components/chart-published.tsx @@ -1,5 +1,5 @@ import { Trans } from "@lingui/macro"; -import { Box, Theme, useMediaQuery } from "@mui/material"; +import { Box, Theme } from "@mui/material"; import { makeStyles } from "@mui/styles"; import clsx from "clsx"; import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react"; @@ -53,7 +53,6 @@ import { InteractiveFiltersChartProvider, InteractiveFiltersProvider, } from "@/stores/interactive-filters"; -import { theme } from "@/themes/federal"; type ChartPublishedProps = { configKey?: string; @@ -109,9 +108,7 @@ export const ChartPublished = (props: ChartPublishedProps) => { const locale = useLocale(); const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []); - const isMobile = useMediaQuery(theme.breakpoints.down("md")); - const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); - const isTablet = !isMobile && !isDesktop; + const publishedChartClasses = usePublishedChartStyles({ shrink: true }); const renderChart = useCallback( (chartConfig: ChartConfig) => ( @@ -127,22 +124,11 @@ export const ChartPublished = (props: ChartPublishedProps) => { [configKey, dataSource, metadataPanelStore, state] ); - const getPadding = () => { - if (isDesktop) return 32; - if (isTablet) return 24; - if (isMobile) return "24px 16px 8px 16px"; - }; - return ( {state.layout.type === "dashboard" ? ( - + { )} - + ( `calc(${theme.spacing(5)} + ${shrink ? DRAWER_WIDTH : 0}px)`, transition: "padding 0.25s ease", }, + dashboardBoxWrapper: { + [theme.breakpoints.up("xs")]: { + padding: theme.spacing(5, 4, 2, 4), + }, + [theme.breakpoints.up("md")]: { + padding: theme.spacing(5), + }, + [theme.breakpoints.up("lg")]: { + padding: theme.spacing(6), + }, + + backgroundColor: theme.palette.grey[200], + }, }) ); From 4fc2effc4ddf4c813dea5d857109cb6c50f3799d Mon Sep 17 00:00:00 2001 From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com> Date: Fri, 13 Sep 2024 15:11:45 +0200 Subject: [PATCH 3/5] fix: Changed showVisualizeLink conditions --- app/components/chart-published.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx index 44990b41c..af885caac 100644 --- a/app/components/chart-published.tsx +++ b/app/components/chart-published.tsx @@ -436,7 +436,10 @@ const ChartPublishedInnerImpl = (props: ChartPublishInnerProps) => { chartConfig={chartConfig} dashboardFilters={state.dashboardFilters} components={allComponents} - showVisualizeLink={state.chartConfigs.length === 1} + showVisualizeLink={ + state.chartConfigs.length === 1 && + state.layout.type !== "dashboard" + } /> From 9d77c4a7ec37896ecc316725d8965f05984f9fd9 Mon Sep 17 00:00:00 2001 From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com> Date: Mon, 16 Sep 2024 07:50:32 +0200 Subject: [PATCH 4/5] fix: Text Wrapping Fix for single line Charts --- app/charts/shared/axis-height-linear.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/charts/shared/axis-height-linear.tsx b/app/charts/shared/axis-height-linear.tsx index a0954c6e6..eb2f312b2 100644 --- a/app/charts/shared/axis-height-linear.tsx +++ b/app/charts/shared/axis-height-linear.tsx @@ -51,6 +51,9 @@ export const AxisHeightLinear = () => { textColor: labelColor, }); + const textIsOverlapping = axisTitleWidth > state.bounds.chartWidth; + const overlappingAmount = Math.ceil(axisTitleWidth / state.bounds.chartWidth); + return ( <> {state.chartType === "comboLineSingle" ? ( @@ -61,7 +64,10 @@ export const AxisHeightLinear = () => { {state.yAxisLabel} ) : ( - + {state.yAxisLabel} From facb3bcc6c885f8b28561535247f1d91db422653 Mon Sep 17 00:00:00 2001 From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com> Date: Mon, 16 Sep 2024 16:16:14 +0200 Subject: [PATCH 5/5] fix: Added Padding to the Legend --- app/charts/shared/axis-height-linear.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/charts/shared/axis-height-linear.tsx b/app/charts/shared/axis-height-linear.tsx index eb2f312b2..e7ae5f704 100644 --- a/app/charts/shared/axis-height-linear.tsx +++ b/app/charts/shared/axis-height-linear.tsx @@ -66,7 +66,7 @@ export const AxisHeightLinear = () => { ) : (