@hitachivantara/uikit-cli 6.0.1

package/src/templates/Dashboard/Map.tsx

@@ -0,0 +1,71 @@
+import { ReactNode } from "react";
+import {
+  MapContainer,
+  MapContainerProps,
+  Marker,
+  MarkerProps,
+  Popup,
+  PopupProps,
+  TileLayer,
+} from "react-leaflet";
+import { css, cx } from "@emotion/css";
+import { Global } from "@emotion/react";
+import { Icon } from "leaflet";
+
+import { mapStyles } from "./Map.styles";
+
+const IconDefault = new Icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png",
+});
+
+const LevelIcons = [
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" fill="#478B1A"><path d="M3.37 11.4a6 6 0 1 1 5.26 0L6 16Zm0 0" /><path fill="#f0f0f0" d="M5.02 8.98 3.15 7.1l.7-.7 1.13 1.12 3.14-3.6.76.66Zm0 0"/></svg>`,
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" fill="#4D8AC0"><path d="M3.71 12H0l1.71-6L0 0h12l-1.71 6L12 12H8.29L6 16Zm0 0"/><path fill="#f0f0f0" d="M5.02 8.98 3.15 7.1l.7-.7 1.13 1.12 3.14-3.6.76.66Zm0 0"/></svg>`,
+  ``, // NO LEVEL 2
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" fill="#F9C846"><path d="M3.37 11.4a6 6 0 1 1 5.26 0L6 16Zm0 0"/><path fill="#f0f0f0" d="M5.54 8h1v1h-1ZM5.5 3h1v4h-1Zm0 0"/></svg>`,
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#D43136"><path d="M5.36 11.4a6 6 0 1 1 5.27 0L8 16Zm0 0"/><path fill="#f0f0f0" d="M6.53 8h1v1h-1ZM6.5 3h1v4h-1Zm2.03 5h1v1h-1ZM8.5 3h1v4h-1Zm0 0"/></svg>`,
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="#930A80"><path d="M3.75 11.19A5.76 5.76 0 0 1 .11 4.7C.66 1.98 3.13 0 6 0s5.34 1.98 5.88 4.7a5.77 5.77 0 0 1-3.64 6.49L6 14.99Zm0 0"/><path fill="#f0f0f0" d="M6.54 7.74v.97h-1v-.97ZM5.5 2.91h1v3.86h-1Zm3.04 4.83v.97h-1v-.97ZM7.5 2.91h1v3.86h-1ZM4.55 7.74v.97h-1v-.97ZM3.5 2.91h1v3.86h-1Zm0 0"/></svg>`,
+].map((svg) => {
+  return new Icon({
+    iconUrl: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`,
+    iconSize: [32, 32],
+  });
+});
+
+interface MapProps extends MapContainerProps {
+  children?: ReactNode;
+  markers?: {
+    position: MarkerProps["position"];
+    label: PopupProps["children"];
+    level?: 0 | 1 | 3 | 4 | 5;
+  }[];
+}
+
+export const Map = ({ markers, ...props }: MapProps) => {
+  return (
+    <>
+      <Global styles={mapStyles} />
+      <MapContainer
+        className={cx(
+          css({
+            ".leaflet-tile-container img": {
+              filter: "grayscale(100%)",
+            },
+          }),
+        )}
+        {...props}
+      >
+        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        {markers?.map(({ label, position, level = -1 }) => (
+          <Marker
+            key={String(position)}
+            icon={LevelIcons[level] || IconDefault}
+            position={position}
+          >
+            <Popup>{label}</Popup>
+          </Marker>
+        ))}
+      </MapContainer>
+    </>
+  );
+};

package/src/templates/Dashboard/data.ts

@@ -0,0 +1,67 @@
+import useSWR from "swr";
+
+const delay = (ms: number) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+const shuffleData = (key: number) => (value: number) => value * key;
+
+const makeValues = (index: number, shuffleKey: number) => {
+  const baseData = [
+    [2300, 1000, 8500, 2300, 1000, 8500],
+    [6000, 1000, 1000, 6000, 1000, 1000],
+    [3700, 7500, 1100, 3700, 7500, 1100],
+    [2100, 8500, 3000, 2100, 8500, 3000],
+    [500, 8000, 9500, 500, 8000, 9500],
+  ];
+
+  return baseData[index].map(shuffleData(shuffleKey));
+};
+
+const fetchData = async (key = 1) => {
+  const barData = {
+    Group: ["Appliances", "Chairs", "Binders", "Storage", "Hardware", "Tables"],
+    "Sales Target": makeValues(0, key),
+    "Sales Per Rep": makeValues(1, key),
+    "Monthly Sales": makeValues(2, key),
+    Target: makeValues(3, key),
+  };
+
+  const lineData = {
+    Group: ["8:30", "9:00", "9:30", "10:00", "10:30", "11:00"],
+    "Sales Target": makeValues(0, key),
+    "Sales Per Rep": makeValues(1, key),
+    "Monthly Sales": makeValues(2, key),
+    Target: makeValues(3, key),
+    Cash: makeValues(4, key),
+  };
+
+  const barData2 = {
+    Group: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+    "Sales Target": makeValues(0, key),
+    "Sales Per Rep": makeValues(1, key),
+    "Monthly Sales": makeValues(2, key),
+    Target: makeValues(3, key),
+  };
+
+  const donutData = {
+    Category: ["Server Sales", "Sales Per Rep", "Monthly Sales"],
+    Total: [61239, 26829, 71902].map(shuffleData(key)),
+  };
+
+  await delay(800);
+
+  return {
+    barData,
+    lineData,
+    barData2,
+    donutData,
+  };
+};
+
+export const useServerData = (index: number) => {
+  return useSWR(`/data/${index}`, async () => fetchData(index + 1), {
+    suspense: true,
+  });
+};

package/src/templates/Dashboard/dependencies.json

@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "@hitachivantara/uikit-react-viz": "^5.6.0",
+    "leaflet": "^1.9.4",
+    "react-leaflet": "^4.2.1",
+    "usehooks-ts": "^2.16.0"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.8"
+  }
+}

package/src/templates/Dashboard/index.tsx

@@ -0,0 +1,173 @@
+import { Suspense, useState, useTransition } from "react";
+import { css } from "@emotion/css";
+import { useDebounce } from "usehooks-ts";
+import {
+  HvButton,
+  HvGrid,
+  HvLoading,
+  HvMultiButton,
+  HvMultiButtonProps,
+  HvTypography,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+import { Add, User } from "@hitachivantara/uikit-react-icons";
+import {
+  HvBarChart,
+  HvDonutChart,
+  HvLineChart,
+  HvVizProvider,
+} from "@hitachivantara/uikit-react-viz";
+
+import { useServerData } from "./data";
+import { GridPanel } from "./GridPanel";
+import { Kpi } from "./Kpi";
+import { Map as MapComponent } from "./Map";
+
+interface ButtonsProps extends HvMultiButtonProps {
+  labels: string[];
+  onButtonChange?: (index: number) => void;
+}
+
+const formatter = (value?: number | string) => `${Number(value) / 1000}k`;
+
+const Buttons = ({ labels, onButtonChange, ...others }: ButtonsProps) => {
+  const [selected, setSelected] = useState(0);
+
+  const handleClick = (index: number) => {
+    if (index === selected) return;
+    setSelected(index);
+    onButtonChange?.(index);
+  };
+
+  return (
+    <HvMultiButton {...others}>
+      {labels.map((label, index) => (
+        <HvButton
+          key={label}
+          style={{ width: 90 }}
+          selected={selected === index}
+          onClick={() => handleClick(index)}
+        >
+          {label}
+        </HvButton>
+      ))}
+    </HvMultiButton>
+  );
+};
+
+const Dashboard = () => {
+  const [time, setTime] = useState(0);
+  const [isPending, startTransition] = useTransition();
+  const isLoading = useDebounce(isPending, 50);
+  const { data } = useServerData(time);
+
+  return (
+    <HvGrid container>
+      <HvGrid item xs={12} display="flex" justifyContent="space-between">
+        <HvTypography component="h1" variant="title3">
+          Dashboard
+        </HvTypography>
+        <div className={css({ display: "flex", gap: theme.space.xs })}>
+          <Buttons
+            labels={["Today", "Week", "Month"]}
+            onButtonChange={(index) => {
+              startTransition(() => {
+                setTime(index);
+              });
+            }}
+          />
+          <HvButton variant="secondaryGhost" startIcon={<Add />}>
+            Add Portlet
+          </HvButton>
+        </div>
+      </HvGrid>
+      <GridPanel xs={12} md={8} isLoading={isLoading}>
+        <HvBarChart
+          horizontal
+          stack="Group"
+          data={data.barData}
+          measures={[
+            "Sales Target",
+            "Sales Per Rep",
+            "Monthly Sales",
+            "Target",
+          ]}
+          groupBy="Group"
+        />
+      </GridPanel>
+      <GridPanel xs={12} md={4} isLoading={isLoading}>
+        <div className={css({ position: "relative", height: "100%" })}>
+          <HvDonutChart
+            data={data.donutData}
+            groupBy="Category"
+            measure={{ field: "Total", valueFormatter: (v) => `${v} €` }}
+          />
+          <div
+            className={css({
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              display: "flex",
+              flexFlow: "column wrap",
+              alignItems: "center",
+              justifyContent: "center",
+            })}
+          >
+            <User iconSize="M" />
+            <HvTypography variant="title3">
+              {data.donutData.Total.reduce((acc, value) => acc + value, 0)}
+            </HvTypography>
+          </div>
+        </div>
+      </GridPanel>
+      {[1, 2, 3, 4].map((key) => (
+        <HvGrid key={key} item xs={6} md={3}>
+          <Kpi color="positive" title="KPI description" value={3340} />
+        </HvGrid>
+      ))}
+      <GridPanel xs={12} isLoading={isLoading}>
+        <HvLineChart
+          area
+          stack="total"
+          data={data.lineData}
+          groupBy="Group"
+          measures={Object.keys(data.lineData).slice(1)}
+          yAxis={{ labelFormatter: formatter }}
+          tooltip={{ valueFormatter: formatter }}
+        />
+      </GridPanel>
+      <GridPanel xs={12} md={6} width="100%" height={400} isLoading={isLoading}>
+        <MapComponent
+          center={[38.7356, -9.2997]}
+          zoom={18}
+          style={{ height: "100%" }}
+          markers={[
+            { position: [38.7356, -9.2997], label: "HV Office", level: 0 },
+            { position: [38.735, -9.299], label: "Bus Stop", level: 3 },
+            { position: [38.735, -9.2993], label: "Fire", level: 4 },
+          ]}
+        />
+      </GridPanel>
+      <GridPanel xs={12} md={6} height={400} isLoading={isLoading}>
+        <HvBarChart
+          height={400}
+          data={data.barData2}
+          groupBy="Group"
+          measures={Object.keys(data.barData2).slice(1)}
+          stack="total"
+        />
+      </GridPanel>
+    </HvGrid>
+  );
+};
+
+export const Component = () => (
+  <HvVizProvider>
+    <Suspense fallback={<HvLoading style={{ minHeight: 400 }} />}>
+      <Dashboard />
+    </Suspense>
+  </HvVizProvider>
+);
+
+export default Component;

package/src/templates/DetailsView/KPIs.tsx

@@ -0,0 +1,70 @@
+import { css } from "@emotion/css";
+import {
+  HvAvatar,
+  HvGrid,
+  HvTypography,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+import { Bottom, Top } from "@hitachivantara/uikit-react-icons";
+
+import { useModelData } from "./data";
+import { MetadataItem } from "./MetadataItem";
+
+const Kpi = ({
+  title,
+  count,
+  diff,
+}: {
+  title: string;
+  count: number;
+  diff: number;
+}) => {
+  const Icon = diff > 0 ? Top : Bottom;
+
+  return (
+    <MetadataItem title={title}>
+      <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+        <HvTypography variant="title2">{count}</HvTypography>
+        <Icon color={theme.colors[diff > 0 ? "positive" : "warning"]} />
+        <HvTypography variant="caption1">
+          {`${Math.abs(diff).toFixed(2)} ${diff > 0 ? "more" : "less"}`}
+        </HvTypography>
+      </div>
+    </MetadataItem>
+  );
+};
+
+export const KPIs = () => {
+  const { data } = useModelData();
+  const { deploys, imageUrl } = data;
+
+  return (
+    <>
+      <HvGrid item xs={12} md={2} lg={2}>
+        <HvAvatar
+          size="xl"
+          status="border"
+          classes={{ container: css({ margin: "auto", width: "fit-content" }) }}
+          src={imageUrl}
+          alt="Asset image"
+        />
+      </HvGrid>
+      <HvGrid item xs={12} md={10} lg={10}>
+        <HvGrid container direction="row">
+          {deploys.summary.map((el) => (
+            <HvGrid key={el.id} item xs={12} sm={4}>
+              <Kpi title={el.title} count={el.count} diff={el.diff} />
+            </HvGrid>
+          ))}
+          {deploys.data.map((el) => (
+            <HvGrid key={el.id} item xs={12} sm={4}>
+              <MetadataItem title={el.title}>
+                <HvTypography variant="caption1">{el.value}</HvTypography>
+              </MetadataItem>
+            </HvGrid>
+          ))}
+        </HvGrid>
+      </HvGrid>
+    </>
+  );
+};

package/src/templates/DetailsView/MetadataItem.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { css } from "@emotion/css";
+import {
+  HvGrid,
+  HvGridProps,
+  HvTypography,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+
+export interface MetadataItemProps extends Omit<HvGridProps, "title"> {
+  title?: ReactNode;
+  children?: ReactNode;
+}
+
+export const MetadataItem = ({
+  title,
+  children,
+  ...others
+}: MetadataItemProps) => (
+  <HvGrid item {...others}>
+    <div
+      role="group"
+      className={css({
+        paddingTop: theme.space.xs,
+        borderTop: `1px solid ${theme.colors.border}`,
+        display: "flex",
+        flexFlow: "column wrap",
+        gap: theme.space.xs,
+      })}
+    >
+      {title && <HvTypography variant="label">{title}</HvTypography>}
+      {children}
+    </div>
+  </HvGrid>
+);

package/src/templates/DetailsView/Properties.tsx

@@ -0,0 +1,127 @@
+import { ComponentType } from "react";
+import { css } from "@emotion/css";
+import {
+  HvColor,
+  HvDropdown,
+  HvGridProps,
+  HvProgressBar,
+  HvTag,
+  HvTagsInput,
+  HvTextArea,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+import { Caution, Level4Alt } from "@hitachivantara/uikit-react-icons";
+
+import { ModelDetails, useModelData } from "./data";
+import { MetadataItem } from "./MetadataItem";
+
+const ProgressBar = ({
+  color = "text",
+  value,
+}: {
+  color?: HvColor;
+  value: number;
+}) => {
+  return (
+    <HvProgressBar
+      classes={{
+        progressBarContainer: css({ height: 12 }),
+        progressBar: css({ backgroundColor: theme.colors[color] || color }),
+      }}
+      value={value}
+    />
+  );
+};
+
+const entries: Partial<
+  Record<
+    keyof ModelDetails,
+    HvGridProps & {
+      label: string;
+      Component?: ComponentType<any>;
+      EditComponent?: ComponentType<any>;
+    }
+  >
+> = {
+  description: {
+    label: "Description",
+    sm: 6,
+    EditComponent: ({ value }) => (
+      <HvTextArea name="description" rows={3} defaultValue={value} />
+    ),
+  },
+  status: {
+    label: "Status",
+    Component: ({ value }) => (
+      <div className={css({ display: "flex", alignItems: "center" })}>
+        <Level4Alt color="negative" /> {value}
+      </div>
+    ),
+    EditComponent: () => (
+      <HvDropdown
+        name="status"
+        values={[
+          { id: "critical", label: "Critical", selected: true },
+          { id: "error", label: "Error" },
+          { id: "warning", label: "Warning" },
+        ]}
+      />
+    ),
+  },
+  tags: {
+    label: "Tags",
+    Component: ({ value }) => (
+      <div className={css({ display: "flex", gap: theme.space.xs })}>
+        {value.map((tag: string) => (
+          <HvTag key={tag} label={tag} />
+        ))}
+      </div>
+    ),
+    EditComponent: ({ value }) => (
+      <HvTagsInput name="tags" defaultValue={value} />
+    ),
+  },
+  progress: {
+    label: "Progress",
+    Component: ({ value }) => <ProgressBar value={value * 100} />,
+  },
+  severity: {
+    label: "Severity",
+    Component: ({ value }) => (
+      <div className={css({ display: "flex", alignItems: "center" })}>
+        <Caution color="warningStrong" /> {value}
+      </div>
+    ),
+  },
+  modifiedAt: {
+    label: "Last Updated",
+  },
+  createdAt: {
+    label: "Created",
+  },
+  risk: {
+    label: "Risk",
+    Component: ({ value }) => (
+      <ProgressBar color="negative" value={value * 100} />
+    ),
+  },
+};
+
+export const Properties = ({ editMode }: { editMode?: boolean }) => {
+  const { data } = useModelData();
+
+  const elements = Object.entries(entries).map(([key, entry]) => {
+    const { label, Component, EditComponent, ...others } = entry;
+    const value = data[key as keyof ModelDetails];
+    const ContentComponent = (editMode && EditComponent) || Component;
+
+    return (
+      <MetadataItem key={key} xs={12} sm={3} title={label} {...others}>
+        {(ContentComponent && <ContentComponent value={value} />) ||
+          (value as any)}
+      </MetadataItem>
+    );
+  });
+
+  return <>{elements}</>;
+};

package/src/templates/DetailsView/Table.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  HvLoadingContainer,
+  HvPagination,
+  HvTable,
+  HvTableBody,
+  HvTableCell,
+  HvTableContainer,
+  HvTableHead,
+  HvTableHeader,
+  HvTableRow,
+  HvTableSection,
+  useHvData,
+  useHvPagination,
+} from "@hitachivantara/uikit-react-core";
+
+import { PaginationDataProps, usePaginationData } from "./data";
+import { DetailsViewEntry, getColumns } from "./utils";
+
+const PAGE_OPTIONS = [8, 16, 32];
+
+interface TableProps {
+  modelId: string;
+}
+
+export const Table = ({ modelId }: TableProps) => {
+  const [params, setParams] = useState<PaginationDataProps>({
+    id: modelId,
+    limit: PAGE_OPTIONS[0],
+    skip: 0,
+  });
+
+  const {
+    data: { pages, data },
+    loading,
+  } = usePaginationData(params);
+
+  const columns = useMemo(() => getColumns(), []);
+
+  const instance = useHvData<DetailsViewEntry, string>(
+    {
+      data,
+      columns,
+      manualPagination: true,
+      autoResetPage: false,
+      pageCount: pages,
+      initialState: { pageSize: PAGE_OPTIONS[0] },
+    },
+    useHvPagination,
+  );
+
+  useEffect(() => {
+    const { pageSize = PAGE_OPTIONS[0], pageIndex = 0 } = instance.state;
+
+    setParams((prev) => ({
+      ...prev,
+      limit: pageSize,
+      skip: pageSize * pageIndex,
+    }));
+  }, [instance.state]);
+
+  return (
+    <HvTableSection>
+      <HvLoadingContainer hidden={!loading}>
+        <HvTableContainer>
+          <HvTable {...instance.getTableProps()}>
+            <HvTableHead>
+              <HvTableRow>
+                {columns.map((col) => (
+                  <HvTableHeader key={col.Header}>{col.Header}</HvTableHeader>
+                ))}
+              </HvTableRow>
+            </HvTableHead>
+            <HvTableBody {...instance.getTableBodyProps()}>
+              {instance.page.map((row) => {
+                instance.prepareRow(row);
+                const { key, ...rowProps } = row.getRowProps();
+                return (
+                  <HvTableRow key={key} {...rowProps}>
+                    {row.cells.map((cell) => {
+                      const { key: cellKey, ...cellProps } =
+                        cell.getCellProps();
+                      return (
+                        <HvTableCell key={cellKey} {...cellProps}>
+                          {cell.render("Cell")}
+                        </HvTableCell>
+                      );
+                    })}
+                  </HvTableRow>
+                );
+              })}
+            </HvTableBody>
+          </HvTable>
+        </HvTableContainer>
+        {instance.page?.length > 0 && (
+          <HvPagination
+            {...instance.getHvPaginationProps?.()}
+            pageSizeOptions={PAGE_OPTIONS}
+          />
+        )}
+      </HvLoadingContainer>
+    </HvTableSection>
+  );
+};