@watt-ui/react 0.0.0-stage → 0.1.0

package/src/server.ts

@@ -0,0 +1,47 @@
+import { init, use } from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+} from "echarts/components";
+import { SVGRenderer } from "echarts/renderers";
+import { prepareSeries } from "./chart/data.js";
+import { chartOption, type ChartConfig } from "./chart/options.js";
+import type { TelemetrySeries } from "./types.js";
+export interface ServerChartProps extends Omit<ChartConfig, "series"> {
+  series: readonly TelemetrySeries[];
+  width: number;
+  height: number;
+}
+/** Render on the server and pass this trusted output to TelemetryChart.Canvas previewSvg. */
+export function renderTelemetrySVG({
+  width,
+  height,
+  series,
+  ...config
+}: ServerChartProps): string {
+  if (![width, height].every((v) => Number.isFinite(v) && v > 0))
+    throw new Error("SSR charts require positive width and height");
+  use([
+    LineChart,
+    GridComponent,
+    TooltipComponent,
+    DataZoomComponent,
+    SVGRenderer,
+  ]);
+  const chart = init(null, undefined, {
+    renderer: "svg",
+    ssr: true,
+    width,
+    height,
+  });
+  try {
+    chart.setOption(
+      chartOption({ ...config, series: prepareSeries(series) }, width),
+    );
+    return chart.renderToSVGString();
+  } finally {
+    chart.dispose();
+  }
+}

package/src/styles.css

@@ -0,0 +1,130 @@
+@source "./**/*.js";
+@theme inline {
+  --color-watt-positive: var(--watt-positive);
+  --color-watt-warning: var(--watt-warning);
+  --color-watt-critical: var(--watt-critical);
+  --color-watt-accent: var(--watt-accent);
+  --color-watt-surface: var(--watt-surface);
+  --color-watt-foreground: var(--watt-foreground);
+  --color-watt-muted: var(--watt-muted);
+  --color-watt-border: var(--watt-border);
+  --color-watt-subtle: var(--watt-subtle);
+}
+:root,
+.watt-theme {
+  --watt-surface: #ffffff;
+  --watt-foreground: #20232c;
+  --watt-muted: #626b7b;
+  --watt-border: #e3e6ec;
+  --watt-subtle: #f1f3f7;
+  --watt-accent: #355dff;
+  --watt-positive: #16806b;
+  --watt-warning: #996009;
+  --watt-critical: #c43b40;
+  --watt-radius: 12px;
+}
+.dark,
+[data-theme="dark"] {
+  --watt-surface: #17191f;
+  --watt-foreground: #eef0f5;
+  --watt-muted: #a4adbe;
+  --watt-border: #333743;
+  --watt-subtle: #252932;
+  --watt-accent: #8ba3ff;
+  --watt-positive: #61d4b7;
+  --watt-warning: #f1bd65;
+  --watt-critical: #ff898d;
+}
+.watt-root {
+  color: var(--watt-foreground);
+  font-variant-numeric: tabular-nums;
+}
+.watt-status {
+  color: var(--watt-muted);
+}
+.watt-status[data-status="normal"] {
+  color: var(--watt-positive);
+}
+.watt-status[data-status="warning"] {
+  color: var(--watt-warning);
+}
+.watt-status[data-status="fault"] {
+  color: var(--watt-critical);
+}
+.watt-status-dot {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+[data-status="standby"] .watt-status-dot {
+  background: transparent;
+  border: 1.5px solid currentColor;
+}
+[data-status="stopped"] .watt-status-dot {
+  border-radius: 1px;
+}
+[data-status="warning"] .watt-status-dot {
+  border-radius: 1px;
+  transform: rotate(45deg);
+}
+[data-status="fault"] .watt-status-dot {
+  border-radius: 0;
+  clip-path: polygon(
+    25% 0,
+    75% 0,
+    100% 25%,
+    100% 75%,
+    75% 100%,
+    25% 100%,
+    0 75%,
+    0 25%
+  );
+}
+[data-status="offline"] .watt-status-dot {
+  background: transparent;
+  border: 1px dashed currentColor;
+}
+.watt-flow-dash {
+  stroke-dasharray: 7 6;
+  animation: watt-flow-dash 3s linear infinite;
+}
+.watt-flow-pulse {
+  animation: watt-flow-pulse 3s ease-in-out infinite;
+}
+.watt-flow-particle {
+  animation: watt-flow-particle 3s linear infinite;
+}
+.watt-chart-preview svg {
+  width: 100%;
+  height: 100%;
+}
+@keyframes watt-flow-dash {
+  to {
+    stroke-dashoffset: -26;
+  }
+}
+@keyframes watt-flow-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+@keyframes watt-flow-particle {
+  from {
+    offset-distance: 0%;
+  }
+  to {
+    offset-distance: 100%;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .watt-flow-dash,
+  .watt-flow-pulse {
+    animation: none !important;
+  }
+  .watt-flow-particle {
+    display: none;
+  }
+}

package/src/theme/shadcn.css

@@ -0,0 +1,14 @@
+/* Import after @watt-ui/react/styles.css inside a shadcn project. */
+:root,
+.dark,
+[data-theme],
+.watt-theme {
+  --watt-surface: var(--background);
+  --watt-foreground: var(--foreground);
+  --watt-muted: var(--muted-foreground);
+  --watt-border: var(--border);
+  --watt-subtle: var(--muted);
+  --watt-accent: var(--primary);
+  --watt-critical: var(--destructive);
+  --watt-radius: var(--radius);
+}

package/src/types.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes } from "react";
+
+export type PowerUnit = "W" | "kW" | "MW";
+export type EnergyUnit = "Wh" | "kWh" | "MWh";
+export type MeasurementUnit =
+  PowerUnit | EnergyUnit | "V" | "A" | "Hz" | "°C" | "%" | "W/m²";
+export type Timestamp = string | number;
+export type DataQuality =
+  "good" | "uncertain" | "stale" | "missing" | "bad" | "offline";
+export type EquipmentStatus =
+  "normal" | "standby" | "stopped" | "warning" | "fault" | "offline";
+export type Density = "compact" | "comfortable";
+export interface PartProps extends HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+export interface RootProps extends PartProps {
+  density?: Density;
+}
+export interface Measurement<U extends MeasurementUnit = MeasurementUnit> {
+  value: number | null;
+  unit: U;
+  timestamp: Timestamp;
+  quality?: DataQuality;
+}
+export interface TimeSeriesPoint {
+  timestamp: Timestamp;
+  value: number | null;
+  quality?: DataQuality;
+}
+export interface TelemetrySeries {
+  id: string;
+  label: string;
+  unit: string;
+  points: readonly TimeSeriesPoint[];
+  color?: string;
+  axis?: 0 | 1;
+  area?: boolean;
+}
+export type TimeRange = readonly [number, number];
+export interface AlarmEvent {
+  id: string;
+  severity: "critical" | "warning" | "info";
+  status: "active" | "acknowledged" | "resolved";
+  timestamp: Timestamp;
+  message: string;
+  asset?: string;
+  description?: string;
+}
+export interface EnergyFlowNode {
+  id: string;
+}
+export interface EnergyFlowEdge {
+  source: string;
+  target: string;
+  sourcePort?: string;
+  targetPort?: string;
+}
+export interface PlantAsset {
+  id: string;
+  label: string;
+  children?: readonly PlantAsset[];
+  status?: EquipmentStatus;
+  measurement?: Measurement;
+}