Skip to content

Commit 67435c1

Browse files
bprusinowskibprusinowski
committed
feat: Add icons to metadata panel
1 parent 4817ae7 commit 67435c1

9 files changed

Lines changed: 154 additions & 5 deletions

File tree

‎app/components/metadata-panel.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,12 @@ import { DataSource } from "@/configurator";
1515
import { DataSetMetadata } from "@/configurator/components/dataset-metadata";
1616
import { DRAWER_WIDTH } from "@/configurator/components/drawer";
1717
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
18+
import { Icon, getDimensionIconName } from "@/icons";
1819
import SvgIcClose from "@/icons/components/IcClose";
1920
import useEvent from "@/utils/use-event";
2021

22+
import Flex from "./flex";
23+
2124
type Section = "general" | "data";
2225

2326
type State = {
@@ -103,6 +106,12 @@ const useStyles = makeStyles<Theme, { drawerTop?: number }>((theme) => {
103106
gap: theme.spacing(4),
104107
padding: 0,
105108
},
109+
icon: {
110+
display: "inline",
111+
marginLeft: -6,
112+
marginTop: -3,
113+
marginRight: 2,
114+
},
106115
};
107116
});
108117

@@ -257,9 +266,15 @@ const TabPanelData = ({
257266
<TabPanel className={classes.tabPanel} value="data">
258267
{dimensions.map((d) => (
259268
<Box key={d.iri}>
260-
<Typography variant="body2" fontWeight="bold">
261-
{d.label}
262-
</Typography>
269+
<Flex>
270+
<Icon
271+
className={classes.icon}
272+
name={getDimensionIconName(d.__typename)}
273+
/>
274+
<Typography variant="body2" fontWeight="bold">
275+
{d.label}
276+
</Typography>
277+
</Flex>
263278
<Typography variant="body2">{d.description}</Typography>
264279
</Box>
265280
))}

‎app/icons/components/IcGeographical.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react";
2+
3+
function SvgIcGeographical(props: React.SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 24 24"
8+
width="1em"
9+
height="1em"
10+
{...props}
11+
>
12+
<g fill="none" fillRule="evenodd">
13+
<g>
14+
<path
15+
fill="currentColor"
16+
d="M12,6 C14.7614237,6 17,8.19787482 17,10.9090908 C17,14.7272727 12,18 12,18 L11.9712483,17.9808455 C11.5654321,17.7080135 7,14.5575757 7,10.9090908 C7,8.19787482 9.23857628,6 12,6 Z M12,9.2727272 C11.0795254,9.2727272 10.3333333,10.0053522 10.3333333,10.9090908 C10.3333333,11.8128295 11.0795254,12.5454545 12,12.5454545 C12.9204746,12.5454545 13.6666667,11.8128295 13.6666667,10.9090908 C13.6666667,10.0053522 12.9204746,9.2727272 12,9.2727272 Z"
17+
/>
18+
</g>
19+
</g>
20+
</svg>
21+
);
22+
}
23+
24+
export default SvgIcGeographical;

‎app/icons/components/IcNumerical.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react";
2+
3+
function SvgIcNumerical(props: React.SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 24 24"
8+
width="1em"
9+
height="1em"
10+
{...props}
11+
>
12+
<g fill="none" fillRule="evenodd">
13+
<g>
14+
<path
15+
fill="currentColor"
16+
d="M5.24031008,8.13296399 L6.60206718,8.13296399 L6.60206718,15.867036 L5.06459948,15.867036 L5.06459948,9.89473684 L3.76873385,10.9584488 L3,9.9501385 L5.24031008,8.13296399 Z M8.79844961,15.867036 L8.79844961,14.5706371 C8.99612403,14.3859649 9.27433247,14.1237304 9.63307494,13.7839335 C9.9918174,13.4589104 10.3578811,13.089566 10.7312661,12.6759003 C11.1192937,12.2548476 11.4450904,11.8374885 11.7086563,11.4238227 C11.9722222,11.010157 12.1076658,10.6223453 12.1149871,10.2603878 C12.1076658,9.90581717 11.9795435,9.6398892 11.7306202,9.46260388 C11.4890181,9.30009234 11.1998277,9.21883657 10.8630491,9.21883657 C10.540913,9.21883657 10.2297588,9.27793167 9.92958656,9.39612188 C9.6294143,9.52169898 9.35120586,9.66943675 9.09496124,9.83933518 L8.97416021,8.55401662 C9.69164513,8.1920591 10.4493971,8.00738689 11.247416,8 C12.8141688,8 13.6158484,8.7534626 13.6524548,10.2603878 C13.6451335,10.6666667 13.5572782,11.0655586 13.3888889,11.4570637 C13.2131783,11.8485688 12.9788975,12.2289935 12.6860465,12.598338 C12.0710594,13.3444137 11.4304479,14.0277008 10.7642119,14.6481994 L13.8940568,14.6481994 L13.8940568,15.867036 L8.79844961,15.867036 Z M15.1459948,14.4265928 C15.6731266,14.6555863 16.2405254,14.7737765 16.8481912,14.7811634 C17.0165805,14.7811634 17.1959518,14.7590028 17.3863049,14.7146814 C17.5620155,14.6703601 17.7340655,14.6075716 17.9024548,14.5263158 C18.0708441,14.4376731 18.2062877,14.3194829 18.3087855,14.1717452 C18.4112834,14.0387812 18.4625323,13.8762696 18.4625323,13.6842105 C18.455211,13.2336103 18.2978036,12.9159741 17.9903101,12.7313019 C17.6828165,12.5614035 17.2764858,12.4764543 16.7713178,12.4764543 L16.0245478,12.4764543 L16.0245478,11.2576177 L16.7273902,11.2576177 C17.254522,11.2576177 17.668174,11.1689751 17.9683463,10.9916898 C18.2685185,10.8217913 18.4222653,10.5706371 18.4295866,10.2382271 C18.4295866,10.0387812 18.3966408,9.87257618 18.3307494,9.73961219 C18.2575366,9.6066482 18.1586994,9.50323176 18.0342377,9.42936288 C17.7853144,9.289012 17.4778208,9.21883657 17.1117571,9.21883657 C16.5040913,9.21883657 15.9293712,9.355494 15.3875969,9.62880886 L15.2997416,8.38781163 C15.9293712,8.13665743 16.6431955,8.00738689 17.4412145,8 C17.6901378,8 17.9573643,8.02216066 18.2428941,8.06648199 C18.535745,8.11819021 18.8102929,8.2179132 19.0665375,8.36565097 C19.3301034,8.50600185 19.546081,8.70544783 19.7144703,8.96398892 C19.8755383,9.22253001 19.959733,9.56232687 19.9670543,9.9833795 C19.959733,10.5004617 19.8242894,10.8993536 19.5607235,11.1800554 C19.2898363,11.468144 18.9493971,11.6860572 18.5394057,11.833795 L18.5394057,11.8559557 C19.0299311,11.9298246 19.3959948,12.132964 19.6375969,12.465374 C19.879199,12.7977839 20,13.2077562 20,13.6952909 C19.9926787,14.145891 19.9048234,14.5226223 19.7364341,14.8254848 C19.5534022,15.1209603 19.3154608,15.3573407 19.0226098,15.534626 C18.8761843,15.6084949 18.7260982,15.6749769 18.5723514,15.734072 C18.4112834,15.7931671 18.2465547,15.8448753 18.0781654,15.8891967 C17.7340655,15.9630656 17.3972868,16 17.0678295,16 C16.3503445,16 15.6804479,15.9150508 15.0581395,15.7451524 L15.1459948,14.4265928 Z"
17+
/>
18+
</g>
19+
</g>
20+
</svg>
21+
);
22+
}
23+
24+
export default SvgIcNumerical;

‎app/icons/components/IcPointInTime.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react";
2+
3+
function SvgIcPointInTime(props: React.SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 24 24"
8+
width="1em"
9+
height="1em"
10+
{...props}
11+
>
12+
<g fill="none" fillRule="evenodd">
13+
<g>
14+
<path
15+
fill="currentColor"
16+
d="M17,8 L16,8 L16,6 L14,6 L14,8 L10,8 L10,6 L8,6 L8,8 L7,8 C6.44771525,8 6,8.44771525 6,9 L6,17 C6,17.5522847 6.44771525,18 7,18 L17,18 C17.5522847,18 18,17.5522847 18,17 L18,9 C18,8.44771525 17.5522847,8 17,8 Z M16,16 L8,16 L8,11 L16,11 L16,16 Z"
17+
/>
18+
</g>
19+
</g>
20+
</svg>
21+
);
22+
}
23+
24+
export default SvgIcPointInTime;

‎app/icons/components/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import { default as Filter } from "@/icons/components/IcFilter";
5656
import { default as Folder } from "@/icons/components/IcFolder";
5757
import { default as Formatting } from "@/icons/components/IcFormatting";
5858
import { default as Forward } from "@/icons/components/IcForward";
59+
import { default as Geographical } from "@/icons/components/IcGeographical";
5960
import { default as Google } from "@/icons/components/IcGoogle";
6061
import { default as HintWarning } from "@/icons/components/IcHintWarning";
6162
import { default as Image } from "@/icons/components/IcImage";
@@ -78,11 +79,13 @@ import { default as MobileLandscape } from "@/icons/components/IcMobileLandscape
7879
import { default as MobilePortrait } from "@/icons/components/IcMobilePortrait";
7980
import { default as More } from "@/icons/components/IcMore";
8081
import { default as Next } from "@/icons/components/IcNext";
82+
import { default as Numerical } from "@/icons/components/IcNumerical";
8183
import { default as Organisations } from "@/icons/components/IcOrganisations";
8284
import { default as Origin } from "@/icons/components/IcOrigin";
8385
import { default as Pause } from "@/icons/components/IcPause";
8486
import { default as Pdf } from "@/icons/components/IcPdf";
8587
import { default as Play } from "@/icons/components/IcPlay";
88+
import { default as PointInTime } from "@/icons/components/IcPointInTime";
8689
import { default as Previous } from "@/icons/components/IcPrevious";
8790
import { default as Print } from "@/icons/components/IcPrint";
8891
import { default as Refresh } from "@/icons/components/IcRefresh";
@@ -190,6 +193,7 @@ export const Icons = {
190193
folder: Folder,
191194
formatting: Formatting,
192195
forward: Forward,
196+
geographical: Geographical,
193197
google: Google,
194198
hintWarning: HintWarning,
195199
image: Image,
@@ -212,11 +216,13 @@ export const Icons = {
212216
mobilePortrait: MobilePortrait,
213217
more: More,
214218
next: Next,
219+
numerical: Numerical,
215220
organisations: Organisations,
216221
origin: Origin,
217222
pause: Pause,
218223
pdf: Pdf,
219224
play: Play,
225+
pointInTime: PointInTime,
220226
previous: Previous,
221227
print: Print,
222228
refresh: Refresh,

‎app/icons/index.tsx‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ComponentProps } from "react";
22

3-
import { ChartType } from "@/configurator";
3+
import { ChartType, ComponentType } from "@/configurator/config-types";
44
import { IconName, Icons } from "@/icons/components";
55

66
export { Icons } from "./components";
@@ -16,14 +16,23 @@ export const Icon = ({
1616
color?: string;
1717
name: IconName;
1818
} & ComponentProps<"svg">) => {
19+
const { style, ...otherProps } = props;
1920
const IconComponent = Icons[name];
2021

2122
if (!IconComponent) {
2223
console.warn("No icon", name);
2324
return null;
2425
}
2526

26-
return <IconComponent width={size} height={size} color={color} {...props} />;
27+
return (
28+
<IconComponent
29+
width={size}
30+
height={size}
31+
color={color}
32+
style={{ minWidth: size, minHeight: size, ...style }}
33+
{...otherProps}
34+
/>
35+
);
2736
};
2837

2938
export const getChartIcon = (chartType: ChartType): IconName => {
@@ -42,5 +51,31 @@ export const getChartIcon = (chartType: ChartType): IconName => {
4251
return "chartScatterplot";
4352
case "table":
4453
return "table";
54+
default:
55+
const _exhaustiveCheck: never = chartType;
56+
return _exhaustiveCheck;
57+
}
58+
};
59+
60+
export const getDimensionIconName = (
61+
dimensionType: ComponentType
62+
): IconName => {
63+
switch (dimensionType) {
64+
case "GeoCoordinatesDimension":
65+
case "GeoShapesDimension":
66+
return "geographical";
67+
case "NominalDimension":
68+
return "chartPie";
69+
case "NumericalMeasure":
70+
return "numerical";
71+
case "OrdinalDimension":
72+
return "sort";
73+
case "OrdinalMeasure":
74+
return "sort";
75+
case "TemporalDimension":
76+
return "pointInTime";
77+
default:
78+
const _exhaustiveCheck: never = dimensionType;
79+
return _exhaustiveCheck;
4580
}
4681
};

‎app/icons/svg/ic_geographical.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎app/icons/svg/ic_numerical.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎app/icons/svg/ic_point_in_time.svg‎

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)