@allurereport/web-dashboard 3.0.0-beta.13 → 3.0.0-beta.15

package/src/components/Dashboard/components/TrendChartWidget/index.tsx

@@ -1,69 +0,0 @@
-import { TrendChart, TrendChartKind, makeSymlogScale } from "@allurereport/web-components";
-import type { Serie, Slice } from "@allurereport/web-components";
-import type { CSSProperties } from "preact/compat";
-import { useCallback, useMemo, useState } from "preact/hooks";
-import { useI18n } from "@/stores/locale";
-import { Widget } from "../Widget";
-
-interface TrendChartWidgetProps<TSlice = { metadata: { executionId: string } }> {
-  title: string;
-  items: readonly Serie[];
-  slices: readonly TSlice[];
-  min: number;
-  max: number;
-  height?: CSSProperties["height"];
-  width?: CSSProperties["width"];
-  rootAriaLabel?: string;
-}
-
-export const TrendChartWidget = ({
-  title,
-  items,
-  slices,
-  min,
-  max,
-  height = 400,
-  width = "100%",
-  rootAriaLabel,
-}: TrendChartWidgetProps) => {
-  const { t } = useI18n("empty");
-  const [selectedSliceIds, setSelectedSliceIds] = useState<string[]>([]);
-
-  const emptyLabel = t("no-results");
-
-  const yScale = useMemo(() => makeSymlogScale(min, max, { constant: 8 }), [max, min]);
-
-  const handleSliceClick = useCallback((slice: Slice) => {
-    const executionIds = slice.points.reduce((acc, point) => {
-      acc.push(point.data.x as string);
-
-      return acc;
-    }, [] as string[]);
-
-    setSelectedSliceIds(() => executionIds);
-  }, []);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const selectedSlices = useMemo(
-    () => slices.filter((slice) => selectedSliceIds.includes(slice.metadata.executionId)),
-    [slices, selectedSliceIds],
-  );
-
-  return (
-    <Widget title={title}>
-      <TrendChart
-        kind={TrendChartKind.SlicesX}
-        data={items}
-        height={height}
-        width={width}
-        emptyLabel={emptyLabel}
-        emptyAriaLabel={emptyLabel}
-        rootAriaLabel={rootAriaLabel}
-        colors={({ color }) => color}
-        yScale={yScale}
-        onSliceClick={handleSliceClick}
-        onSliceTouchEnd={handleSliceClick}
-      />
-    </Widget>
-  );
-};

package/src/components/Dashboard/components/Widget/index.tsx

@@ -1,19 +0,0 @@
-import { Heading } from "@allurereport/web-components";
-import type { FunctionalComponent } from "preact";
-import * as styles from "./styles.scss";
-
-interface WidgetProps {
-  title: string;
-}
-
-export const Widget: FunctionalComponent<WidgetProps> = ({ children, title }) => {
-  return (
-    <div className={styles.widget}>
-      <div className={styles.header}>
-        <div className={styles.dragArea} />
-        <Heading size="s">{title}</Heading>
-      </div>
-      <div className={styles.content}>{children}</div>
-    </div>
-  );
-};

package/src/components/Dashboard/components/Widget/styles.scss

@@ -1,31 +0,0 @@
-.widget {
-  border-radius: 8px;
-  box-shadow: var(--shadow-small);
-  overflow: hidden;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--on-border-primary);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 0 0 auto;
-}
-
-.dragArea {
-  width: 24px;
-  height: 24px;
-  margin-left: -8px;
-  flex: 0 0 auto;
-}
-
-.content {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-}