Skip to content

Commit

Permalink
Merge pull request #913 from visualize-admin/feat/metadata-panel
Browse files Browse the repository at this point in the history
feat: Metadata panel v2
  • Loading branch information
bprusinowski authored Nov 29, 2022
2 parents 85b0611 + e76efef commit bc0b3a5
Show file tree
Hide file tree
Showing 27 changed files with 709 additions and 382 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ You can also check the [release page](https://github.com/visualize-admin/visuali

## Unreleased

Nothing yet.
- Metadata is now shown in a dedicated panel that can be reached both from editor & published mode

## [3.15.0] - 2022-11-29

Expand Down
6 changes: 3 additions & 3 deletions app/charts/area/areas-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import {
formatNumberWithUnit,
useTimeFormatUnit,
} from "@/formatters";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { getPalette } from "@/palettes";
import { sortByIndex } from "@/utils/array";
import { estimateTextWidth } from "@/utils/estimate-text-width";
Expand All @@ -70,7 +71,7 @@ export interface AreasState extends CommonChartState {
segments: string[];
colors: ScaleOrdinal<string, string>;
yAxisLabel: string;
yAxisDescription: string | undefined;
yAxisDimension: DimensionMetadataFragment;
chartWideData: ArrayLike<Observation>;
allDataWide: ArrayLike<Observation>;
series: $FixMe[];
Expand Down Expand Up @@ -202,7 +203,6 @@ const useAreasState = (
}

const yAxisLabel = getLabelWithUnit(yMeasure);
const yAxisDescription = yMeasure.description || undefined;

/** Ordered segments */
const segmentSorting = fields.segment?.sorting;
Expand Down Expand Up @@ -404,7 +404,7 @@ const useAreasState = (
yScale,
getSegment,
yAxisLabel,
yAxisDescription,
yAxisDimension: yMeasure,
segments,
colors,
chartWideData,
Expand Down
6 changes: 3 additions & 3 deletions app/charts/column/columns-grouped-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import {
} from "@/configurator/components/ui-helpers";
import { isTemporalDimension, Observation } from "@/domain/data";
import { useFormatNumber, formatNumberWithUnit } from "@/formatters";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { getPalette } from "@/palettes";
import { sortByIndex } from "@/utils/array";
import {
Expand All @@ -77,7 +78,7 @@ export interface GroupedColumnsState extends CommonChartState {
segments: string[];
colors: ScaleOrdinal<string, string>;
yAxisLabel: string;
yAxisDescription: string | undefined;
yAxisDimension: DimensionMetadataFragment;
grouped: [string, Observation[]][];
getAnnotationInfo: (d: Observation) => TooltipInfo;
showStandardError: boolean;
Expand Down Expand Up @@ -312,7 +313,6 @@ const useGroupedColumnsState = (
}

const yAxisLabel = getLabelWithUnit(yMeasure);
const yAxisDescription = yMeasure.description || undefined;

// Group
const grouped = useMemo(() => {
Expand Down Expand Up @@ -452,7 +452,7 @@ const useGroupedColumnsState = (
getSegment,
getSegmentLabel,
yAxisLabel,
yAxisDescription,
yAxisDimension: yMeasure,
segments,
colors,
grouped,
Expand Down
6 changes: 3 additions & 3 deletions app/charts/column/columns-stacked-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import { Observer, useWidth } from "@/charts/shared/use-width";
import { ColumnFields, SortingOrder, SortingType } from "@/configurator";
import { isTemporalDimension, Observation } from "@/domain/data";
import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { getPalette } from "@/palettes";
import { sortByIndex } from "@/utils/array";
import {
Expand All @@ -75,7 +76,7 @@ export interface StackedColumnsState extends CommonChartState {
segments: string[];
colors: ScaleOrdinal<string, string>;
yAxisLabel: string;
yAxisDescription: string | undefined;
yAxisDimension: DimensionMetadataFragment;
chartWideData: ArrayLike<Observation>;
allDataWide: ArrayLike<Observation>;
grouped: [string, Observation[]][];
Expand Down Expand Up @@ -325,7 +326,6 @@ const useColumnsStackedState = (
}

const yAxisLabel = getLabelWithUnit(yMeasure);
const yAxisDescription = yMeasure.description || undefined;

const yScale = scaleLinear().domain(yStackDomain).nice();

Expand Down Expand Up @@ -507,7 +507,7 @@ const useColumnsStackedState = (
getSegment,
getSegmentLabel,
yAxisLabel,
yAxisDescription,
yAxisDimension: yMeasure,
segments,
colors,
chartWideData,
Expand Down
11 changes: 7 additions & 4 deletions app/charts/column/columns-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ import {
formatNumberWithUnit,
useTimeFormatUnit,
} from "@/formatters";
import { TemporalDimension, TimeUnit } from "@/graphql/query-hooks";
import {
DimensionMetadataFragment,
TemporalDimension,
TimeUnit,
} from "@/graphql/query-hooks";
import { getPalette } from "@/palettes";
import {
getSortingOrders,
Expand All @@ -79,7 +83,7 @@ export interface ColumnsState extends CommonChartState {
segments: string[];
colors: ScaleOrdinal<string, string>;
yAxisLabel: string;
yAxisDescription: string | undefined;
yAxisDimension: DimensionMetadataFragment;
getAnnotationInfo: (d: Observation) => TooltipInfo;
showStandardError: boolean;
}
Expand Down Expand Up @@ -229,7 +233,6 @@ const useColumnsState = (
}

const yAxisLabel = getLabelWithUnit(yMeasure);
const yAxisDescription = yMeasure.description || undefined;

const { left, bottom } = useChartPadding(
yScale,
Expand Down Expand Up @@ -358,7 +361,7 @@ const useColumnsState = (
getSegment,
getSegmentLabel,
yAxisLabel,
yAxisDescription,
yAxisDimension: yMeasure,
segments,
colors,
getAnnotationInfo,
Expand Down
6 changes: 3 additions & 3 deletions app/charts/line/lines-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import {
formatNumberWithUnit,
useTimeFormatUnit,
} from "@/formatters";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { getPalette } from "@/palettes";
import { sortByIndex } from "@/utils/array";
import { estimateTextWidth } from "@/utils/estimate-text-width";
Expand All @@ -62,7 +63,7 @@ export interface LinesState extends CommonChartState {
colors: ScaleOrdinal<string, string>;
xAxisLabel: string;
yAxisLabel: string;
yAxisDescription: string | undefined;
yAxisDimension: DimensionMetadataFragment;
grouped: Map<string, Observation[]>;
chartWideData: ArrayLike<Observation>;
allDataWide: ArrayLike<Observation>;
Expand Down Expand Up @@ -184,7 +185,6 @@ const useLinesState = (
}

const yAxisLabel = getLabelWithUnit(yMeasure);
const yAxisDescription = yMeasure.description || undefined;

const segmentDimension = useMemo(() => {
return (
Expand Down Expand Up @@ -345,7 +345,7 @@ const useLinesState = (
getSegmentLabel,
xAxisLabel,
yAxisLabel,
yAxisDescription,
yAxisDimension: yMeasure,
segments,
colors,
grouped: preparedDataGroupedBySegment,
Expand Down
11 changes: 5 additions & 6 deletions app/charts/scatterplot/scatterplot-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { ScatterPlotFields } from "@/configurator";
import { mkNumber } from "@/configurator/components/ui-helpers";
import { DimensionValue, Observation } from "@/domain/data";
import { useFormatNumber } from "@/formatters";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { getPalette } from "@/palettes";
import { estimateTextWidth } from "@/utils/estimate-text-width";

Expand All @@ -43,9 +44,9 @@ export interface ScatterplotState extends CommonChartState {
getSegment: (d: Observation) => string;
colors: ScaleOrdinal<string, string>;
xAxisLabel: string;
xAxisDescription: string | undefined;
xAxisDimension: DimensionMetadataFragment;
yAxisLabel: string;
yAxisDescription: string | undefined;
yAxisDimension: DimensionMetadataFragment;
getSegmentLabel: (s: string) => string;
getAnnotationInfo: (d: Observation, values: Observation[]) => TooltipInfo;
}
Expand Down Expand Up @@ -93,7 +94,6 @@ const useScatterplotState = ({
}

const xAxisLabel = getLabelWithUnit(xMeasure);
const xAxisDescription = xMeasure.description || undefined;

const xMinValue = Math.min(mkNumber(min(preparedData, (d) => getX(d))), 0);
const xMaxValue = max(preparedData, (d) => getX(d)) as number;
Expand All @@ -107,7 +107,6 @@ const useScatterplotState = ({
}

const yAxisLabel = getLabelWithUnit(yMeasure);
const yAxisDescription = yMeasure.description || undefined;

const yMinValue = Math.min(mkNumber(min(preparedData, (d) => getY(d))), 0);
const yMaxValue = max(preparedData, getY) as number;
Expand Down Expand Up @@ -243,9 +242,9 @@ const useScatterplotState = ({
getSegment,
colors,
xAxisLabel,
xAxisDescription,
xAxisDimension: xMeasure,
yAxisLabel,
yAxisDescription,
yAxisDimension: yMeasure,
getAnnotationInfo,
getSegmentLabel,
};
Expand Down
22 changes: 7 additions & 15 deletions app/charts/shared/axis-height-linear.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import { LinesState } from "@/charts/line/lines-state";
import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
import { useChartState } from "@/charts/shared/use-chart-state";
import { useChartTheme } from "@/charts/shared/use-chart-theme";
import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
import { useFormatNumber } from "@/formatters";
import { MaybeTooltip } from "@/utils/maybe-tooltip";

export const TICK_MIN_HEIGHT = 50;

Expand All @@ -23,7 +23,7 @@ export const AxisHeightLinear = () => {
const ref = useRef<SVGGElement>(null);
const formatNumber = useFormatNumber({ decimals: "auto" });

const { yScale, yAxisLabel, yAxisDescription, bounds } = useChartState() as
const { yScale, yAxisLabel, yAxisDimension, bounds } = useChartState() as
| AreasState
| ColumnsState
| GroupedColumnsState
Expand Down Expand Up @@ -61,19 +61,11 @@ export const AxisHeightLinear = () => {

return (
<>
<g>
<MaybeTooltip text={yAxisDescription}>
<text
x={0}
y={0}
dy={labelFontSize}
fontSize={labelFontSize}
textDecoration={yAxisDescription ? "underline" : undefined}
>
{yAxisLabel}
</text>
</MaybeTooltip>
</g>
<OpenMetadataPanelWrapper dim={yAxisDimension} svg={true}>
<text x={0} y={0} dy={labelFontSize} fontSize={labelFontSize}>
{yAxisLabel}
</text>
</OpenMetadataPanelWrapper>
<g
ref={ref}
transform={`translate(${bounds.margins.left}, ${bounds.margins.top})`}
Expand Down
9 changes: 4 additions & 5 deletions app/charts/shared/axis-width-linear.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import { useEffect, useRef } from "react";
import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
import { useChartState } from "@/charts/shared/use-chart-state";
import { useChartTheme } from "@/charts/shared/use-chart-theme";
import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
import { useFormatNumber } from "@/formatters";
import { estimateTextWidth } from "@/utils/estimate-text-width";
import { MaybeTooltip } from "@/utils/maybe-tooltip";

export const AxisWidthLinear = () => {
const formatNumber = useFormatNumber();
const { xScale, bounds, xAxisLabel, xAxisDescription } =
const { xScale, bounds, xAxisLabel, xAxisDimension } =
useChartState() as ScatterplotState;
const { chartWidth, chartHeight, margins } = bounds;
const { labelColor, labelFontSize, gridColor, fontFamily } = useChartTheme();
Expand Down Expand Up @@ -51,18 +51,17 @@ export const AxisWidthLinear = () => {
return (
<>
<g transform={`translate(${margins.left}, ${margins.top})`}>
<MaybeTooltip text={xAxisDescription}>
<OpenMetadataPanelWrapper dim={xAxisDimension} svg={true}>
<text
x={chartWidth}
y={chartHeight + margins.bottom}
dy={-labelFontSize}
fontSize={labelFontSize}
textAnchor="end"
textDecoration={xAxisDescription ? "underline" : undefined}
>
{xAxisLabel}
</text>
</MaybeTooltip>
</OpenMetadataPanelWrapper>
</g>
<g
ref={xAxisRef}
Expand Down
Loading

1 comment on commit bc0b3a5

@vercel
Copy link

@vercel vercel bot commented on bc0b3a5 Nov 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

visualization-tool – ./

visualization-tool-ixt1.vercel.app
visualization-tool-git-main-ixt1.vercel.app
visualization-tool-alpha.vercel.app

Please sign in to comment.