Skip to content

Commit 9f47ff9

Browse files
BlueManCZBlueManCZ
committed
Attribute chart and icon selection
1 parent 4799767 commit 9f47ff9

File tree

12 files changed

+114
-12
lines changed

12 files changed

+114
-12
lines changed

‎src/client/apps/contwatch-client/app/[lang]/handlers/[handlerId]/page.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
import fs from "node:fs";
2+
13
import type { AttributeModel } from "@repo/types/AttributeModel";
24
import type { HandlerModel } from "@repo/types/HandlerModel";
5+
import type { IconType } from "@repo/types/IconType";
36
import type { PageParams } from "@repo/types/PageProps";
47
import { Text } from "@repo/ui/Text";
58
import { ssrTranslation } from "@repo/utils/ssrTranslation";
@@ -31,6 +34,11 @@ export default async function HandlersPage({ params }: HandlersPageParams) {
3134
attributesFallback[Attributes.endpoint({ id: attribute.id })] = attribute;
3235
}
3336

37+
const attributeIcons: IconType[] = [];
38+
for (const file of fs.readdirSync("public/icons").filter((file) => file.endsWith(".svg"))) {
39+
attributeIcons.push(file.replace(".svg", "") as IconType);
40+
}
41+
3442
return (
3543
<CustomSWRConfig
3644
value={{
@@ -44,7 +52,7 @@ export default async function HandlersPage({ params }: HandlersPageParams) {
4452
<Link href={"/handlers"}>{t("Handlers")}</Link> · {fallbackHandler.name}
4553
</Text>
4654
<HandlersWrapper>
47-
<HandlerWidget editMode {...{ handlerId }} />
55+
<HandlerWidget editMode {...{ handlerId, attributeIcons }} />
4856
</HandlersWrapper>
4957
</CustomSWRConfig>
5058
);

‎src/client/apps/contwatch-client/app/[lang]/handlers/components/AttributeWidget/AttributeWidget.tsx‎

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ type AttributeWidgetProps = {
2626
bareAttribute: AttributeModel;
2727
draggable?: boolean;
2828
editMode?: boolean;
29+
attributeIcons?: IconType[];
30+
2931
onAttributeDelete(attributeId: number): void;
3032
};
3133

@@ -36,11 +38,13 @@ export const AttributeWidget: FC<AttributeWidgetProps> = ({
3638
draggable,
3739
editMode,
3840
onAttributeDelete,
41+
attributeIcons,
3942
}) => {
4043
const { t } = useTranslation();
4144
const router = useRouter();
4245

4346
const [editPopupOpen, setEditPopupOpen] = useState(false);
47+
const [iconSelectOpen, setIconSelectOpen] = useState(false);
4448

4549
const {
4650
model: attribute = bareAttribute,
@@ -230,18 +234,74 @@ export const AttributeWidget: FC<AttributeWidgetProps> = ({
230234
}
231235
/>
232236
<Input
233-
title={t("Icon")}
234-
value={attribute.icon}
237+
title={t("Chart color")}
238+
type={"color"}
239+
value={attribute.color ?? "#5278FF"}
235240
onValueChange={(value) =>
236241
setAttribute((a) => {
237242
if (!a) return a;
238243
return {
239244
...a,
240-
icon: value as IconType,
245+
color: value,
241246
};
242247
})
243248
}
244249
/>
250+
<Column gap={"5px"}>
251+
<Text size={"tiny"}>{t("Icon")}</Text>
252+
<Flex gap={"1rem"}>
253+
<Input
254+
grow
255+
value={attribute.icon}
256+
onValueChange={(value) =>
257+
setAttribute((a) => {
258+
if (!a) return a;
259+
return {
260+
...a,
261+
icon: value as IconType,
262+
};
263+
})
264+
}
265+
/>
266+
<Button
267+
icon={attribute.icon ?? "circle"}
268+
slim
269+
variant={"default"}
270+
onClick={() => setIconSelectOpen(true)}
271+
/>
272+
<Popup
273+
visible={iconSelectOpen}
274+
onClose={() => setIconSelectOpen(false)}
275+
title={t("Select icon")}
276+
>
277+
<Flex wrap={"wrap"} gap={"10px"} padding={"block"}>
278+
{attributeIcons?.map((icon) => (
279+
<Button
280+
key={icon}
281+
icon={icon}
282+
slim
283+
variant={
284+
icon === attribute.icon ||
285+
(icon === "circle" && !attribute.icon)
286+
? "default"
287+
: "outline"
288+
}
289+
onClick={() => {
290+
setAttribute((a) => {
291+
if (!a) return a;
292+
return {
293+
...a,
294+
icon,
295+
};
296+
});
297+
setIconSelectOpen(false);
298+
}}
299+
/>
300+
))}
301+
</Flex>
302+
</Popup>
303+
</Flex>
304+
</Column>
245305
<Separator />
246306
<Flex gap={"1rem"}>
247307
<Button

‎src/client/apps/contwatch-client/app/[lang]/handlers/components/HandlerWidget/HandlerWidget.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
verticalListSortingStrategy,
1919
} from "@dnd-kit/sortable";
2020
import type { HandlerModel } from "@repo/types/HandlerModel";
21+
import type { IconType } from "@repo/types/IconType";
2122
import { Flex } from "@repo/ui/Flex";
2223
import { Column } from "@repo/ui/FlexPartials";
2324
import { Icon } from "@repo/ui/Icon";
@@ -36,11 +37,12 @@ import styles from "./HandlerWidget.module.scss";
3637
type HandlerWidgetProps = {
3738
handlerId: number;
3839
editMode?: boolean;
40+
attributeIcons?: IconType[];
3941
};
4042

4143
const bem = bemClassNames(styles);
4244

43-
export const HandlerWidget: FC<HandlerWidgetProps> = ({ handlerId, editMode }) => {
45+
export const HandlerWidget: FC<HandlerWidgetProps> = ({ handlerId, editMode, attributeIcons }) => {
4446
const { t } = useTranslation();
4547

4648
const {
@@ -166,7 +168,7 @@ export const HandlerWidget: FC<HandlerWidgetProps> = ({ handlerId, editMode }) =
166168
});
167169
commitHandler();
168170
}}
169-
{...{ bareAttribute, editMode }}
171+
{...{ bareAttribute, editMode, attributeIcons }}
170172
/>
171173
);
172174
})}

‎src/client/apps/contwatch-client/app/[lang]/inspector/components/InspectorChart/InspectorChart.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import "chartjs-adapter-date-fns";
22

3+
import { selectLocaleState } from "@repo/store/slices/settingsSlice";
34
import { Button } from "@repo/ui/Button";
45
import { Flex } from "@repo/ui/Flex";
56
import { Column } from "@repo/ui/FlexPartials";
@@ -19,6 +20,7 @@ import {
1920
} from "chart.js";
2021
import { type FC, useCallback, useEffect, useState } from "react";
2122
import { Line } from "react-chartjs-2";
23+
import { useSelector } from "react-redux";
2224

2325
import { useAttributeChart } from "../../../swrUtils";
2426
import { options } from "./chartOptions";
@@ -36,6 +38,7 @@ type InspectorChartProps = {
3638

3739
export const InspectorChart: FC<InspectorChartProps> = ({ attributes = [], date, onSettingsClick }) => {
3840
const { t } = useTranslation();
41+
const lng = useSelector(selectLocaleState);
3942

4043
// const ref = useRef<Chart>(null);
4144
const [ref, setRef] = useState<Chart | undefined>(undefined);
@@ -87,7 +90,7 @@ export const InspectorChart: FC<InspectorChartProps> = ({ attributes = [], date,
8790
x: data.x * 1000,
8891
y: data.y,
8992
})),
90-
borderColor: "#5278FF",
93+
borderColor: attributeChart.color ?? "#5278FF",
9194
})) ?? [],
9295
};
9396

@@ -126,7 +129,22 @@ export const InspectorChart: FC<InspectorChartProps> = ({ attributes = [], date,
126129
</Flex>
127130
<div className={bem("chart")}>
128131
<Line
129-
{...{ options: options as ChartOptions<"line">, data }}
132+
{...{
133+
options: {
134+
...options,
135+
scales: {
136+
...options.scales,
137+
x: {
138+
...options.scales.x,
139+
time: {
140+
...options.scales.x.time,
141+
tooltipFormat: lng === "cs" ? "d.MM.yyyy HH:mm:ss" : undefined,
142+
},
143+
},
144+
},
145+
} as ChartOptions<"line">,
146+
data,
147+
}}
130148
ref={(ref) => setRef(ref as unknown as Chart)}
131149
onWheel={() => setZoomLevel(ref?.getZoomLevel?.() ?? 1)}
132150
onTouchEnd={() => setZoomLevel(ref?.getZoomLevel?.() ?? 1)}

‎src/client/packages/types/src/models/AttributeChartModel.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ type ChartPoint = {
66
export interface AttributeChartModel {
77
id: number;
88
label: string;
9+
color?: string;
910
data: ChartPoint[];
1011
}

‎src/client/packages/types/src/models/AttributeModel.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export interface AttributeModel {
1010
icon?: IconType;
1111
order?: number;
1212
rounding?: number;
13+
color?: string;
1314
data?: {
1415
value?: string | number;
1516
trend: -1 | 0 | 1;

‎src/client/packages/ui/src/components/Input/Input.module.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,17 @@
6161
--icon-filter: none;
6262

6363
#{$this}__input {
64+
height: unset;
6465
padding: 0;
6566
}
6667
}
6768
}
6869

6970
&__input {
71+
box-sizing: border-box;
7072
flex-grow: 1;
7173
width: 100%;
74+
height: 46px;
7275
padding: 12px 15px;
7376
border: none;
7477
outline: transparent;

‎src/client/packages/ui/src/components/Input/Input.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export const Input: FC<InputProps> = ({
157157
e.preventDefault();
158158
commitNumberValue(offsetValue(-step), true);
159159
}}
160-
size={20}
160+
size={16}
161161
/>
162162
</div>
163163
)}
@@ -251,7 +251,7 @@ export const Input: FC<InputProps> = ({
251251
e.preventDefault();
252252
commitNumberValue(offsetValue(step), true);
253253
}}
254-
size={20}
254+
size={16}
255255
/>
256256
</div>
257257
)}

‎src/client/packages/utils/src/i18n/locales/cs/translation.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,7 @@
2020
"Stored attributes": "Uložené atributy",
2121
"Available attributes": "Dostupné atributy",
2222
"Do you want to delete attribute": "Opravdu chcete smazat atribut",
23-
"Decimal places rounding": "Zaokrouhlení desetinných míst"
23+
"Decimal places rounding": "Zaokrouhlení desetinných míst",
24+
"Chart color": "Barva grafu",
25+
"Select icon": "Vyberte ikonu"
2426
}

‎src/client/packages/utils/src/i18n/locales/en/translation.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,7 @@
2020
"Stored attributes": "Stored attributes",
2121
"Available attributes": "Available attributes",
2222
"Do you want to delete attribute": "Do you want to delete attribute",
23-
"Decimal places rounding": "Decimal places rounding"
23+
"Decimal places rounding": "Decimal places rounding",
24+
"Chart color": "Chart color",
25+
"Select icon": "Select icon"
2426
}

0 commit comments

Comments
 (0)