Feature/dam profile chart

.changeset/great-lies-sink.md

@@ -0,0 +1,5 @@
+---
+"@usace-watermanagement/groundwork-water": minor
+---
+
+Added A2W Dam Profile Chart to component library

docs/src/bundles/route-bundle.js

@@ -49,6 +49,8 @@ import CWMSSpreadsheetDocs from "../pages/docs/forms/cwms-spreadsheet";
 import InteractiveFormTest from "../pages/docs/forms/interactive-test";
 import { docsConfig } from "../config/docs.config";
 import GetPrecisionPage from "../pages/docs/utilities/get-precision";
+import DamProfileDocs from "../pages/docs/graphics/dam-profile";
+import GraphicsDocs from "../pages/docs/graphics";
 import DataStatus from "../pages/docs/summary/data-status";
 
 export default createRouteBundle(
@@ -79,6 +81,8 @@ export default createRouteBundle(
     "/docs/hooks/use-cda-blobs": useCdaBlobs,
     "/docs/plots": PlotsDocs,
     "/docs/plots/cwms-plot": CWMSPlotDocs,
+    "/docs/graphics": GraphicsDocs,
+    "/docs/graphics/dam-profile": DamProfileDocs,
     "/docs/plots/basin-pie": BasinPieDocs,
     "/docs/maps": Maps,
     "/docs/tables": Tables,

docs/src/nav-links.js

@@ -171,6 +171,18 @@ export default [
       },
     ],
   },
+  {
+    id: "graphics",
+    text: "Graphics",
+    href: `${BASE_URL}#/docs/graphics`,
+    children: [
+      {
+        id: "dam-profile",
+        text: "Dam Profile",
+        href: `${BASE_URL}#/docs/graphics/dam-profile`,
+      },
+    ],
+  },
   {
     id: "forms",
     text: "Forms",

docs/src/pages/docs/graphics/dam-profile.jsx

@@ -0,0 +1,98 @@
+import { UsaceBox, Code, H3, Text, Badge } from "@usace/groundwork";
+import { DamProfile } from "@usace-watermanagement/groundwork-water";
+import { Code as CodeBlock } from "../../components/code.jsx";
+import Divider from "../../components/divider.jsx";
+import DocsPage from "../_docs-wrapper.jsx";
+import PropsTable from "../../components/props-table.jsx";
+import chartProps from "../../../props-declarations/chart.jsx";
+
+function DamProfileDocs() {
+  return (
+    <DocsPage middleText="Dam Profile">
+      <UsaceBox title="Dam Profile">
+        <Text>
+          The Dam Profile is a graphic for displaying current levels and timeseries
+          values of a project.
+        </Text>
+        <Text className="mt-2">
+          The graphic intakes an object of values and renders the chart. Chart can be
+          customized to draw/omit specific sections by providing specific props.
+        </Text>
+      </UsaceBox>
+      <Divider text="Example" className="mt-8" />
+      <div className="h-vh border border-red-500">
+        <DamProfile
+          info={{
+            damBottom: 820,
+            damTop: 913,
+            gradientBottom: 888,
+            gradientTop: 901,
+            inflow: 0,
+            infoText: "Alum Creek Lake",
+            latestTime: "2026-05-22T13:45:00Z",
+            levels: [
+              { name: "Top of Dam", value: 913 },
+              { name: "Top of Flood", value: 901 },
+              { name: "Top of Inactive", value: 835 },
+              { name: "Guide Curve", value: 900 },
+              { name: "Streambed", value: 820 },
+            ],
+            outflow: 519.58,
+            pool: 888.81,
+            powerGeneration: 15.21,
+            surcharge: 101,
+            tail: 3.28,
+            precip: 2.3,
+            outflowTotals: [
+              { name: "Turbine Total", value: 400 },
+              { name: "Gated Total", value: 18.58 },
+              { name: "Surcharge Release", value: 101 },
+            ],
+          }}
+        />
+      </div>
+      <CodeBlock className="mt-8" language="jsx">
+        {`import { DamProfile } from "@usace-watermanagement/groundwork-water";
+
+        <DamProfile 
+          info={{
+            damBottom: 820,
+            damTop: 913,
+            gradientBottom: 888,
+            gradientTop: 901,
+            inflow: 0,
+            infoText: "Alum Creek Lake",
+            latestTime: "2026-05-22T13:45:00Z",
+            levels:[
+              {name: "Streambed", value: 820},
+              {name: "Top of Dam", value: 913},
+              {name: "Top of Flood", value: 901},
+              {name: "Top of Inactive", value: 835},
+              {name: "Guide Curve", value: 900},
+            ],
+            outflow: 519.58,
+            pool: 888.81,
+            powerGeneration: 15.21,
+            surcharge: 101,
+            tail: 3.28,
+            precip: 2.3,
+            outflowTotals: [
+              {name: "Turbine Total", value: 400}, 
+              {name: "Gated Total", value: 18.58}, 
+              {name: "Surcharge Release", value: 101}
+            ],
+          }}
+      />
+`}
+      </CodeBlock>
+      <Divider text="Precision" className="mt-8" />
+
+      <div className="gw-font-bold gw-text-lg gw-pt-6">
+        Component API - <Code className="gw-p-2">{`<CWMSPlot />`}</Code>
+      </div>
+      <PropsTable propsList={chartProps} showReq={false} />
+    </DocsPage>
+  );
+}
+
+export default DamProfileDocs;

docs/src/pages/docs/graphics/index.jsx

@@ -0,0 +1,39 @@
+import { Link, Text } from "@usace/groundwork";
+import { H4 } from "@usace/groundwork";
+import DocsPage from "../_docs-wrapper";
+
+const BASE_URL = import.meta.env.BASE_URL;
+
+function GraphicsDocs() {
+  return (
+    <DocsPage
+      nextUrl="/docs/tables"
+      prevUrl="/docs/react-query"
+      middleText="Plots"
+      nextText="Go to Tables"
+      prevText="Return to React Query"
+    >
+      <div>
+        <Text className="pb-6">
+          The groundwork-water graphics components are intended to create
+          consistently-styled water management graphics without being opinonated on the
+          source of the data,
+        </Text>
+      </div>
+      <H4>Components</H4>
+      <ul>
+        <li>
+          <Link href={`${BASE_URL}#/docs/graphics/dam-profile`}>
+            Dam Profile Graphic - A graphic for displaying levels and timeseries values
+            at a project.
+          </Link>
+        </li>
+      </ul>
+      <br />
+      ``
+    </DocsPage>
+  );
+}
+
+export { GraphicsDocs as DataHooks };
+export default GraphicsDocs;

docs/src/pages/docs/summary/data-status.jsx

@@ -138,7 +138,7 @@ function DataStatusPage() {
         office="SWT"
         tsids={swtTsids}
         pageSize={12}
-      //  linkPath="/SWT/projects"
+        //  linkPath="/SWT/projects"
         lookBackHours={6}
         dateFormat="MMM DD HH:mm z"
         showBadges={true}

docs/src/props-declarations/chart.jsx

@@ -0,0 +1,88 @@
+const chartProps = [
+  {
+    name: "damBottom",
+    type: "number",
+    default: "undefined",
+    desc: "The level at which the bottom of the dam will be drawn. Usually Elev.Streambed or Stage.Streambed",
+  },
+  {
+    name: "damTop",
+    type: "number",
+    default: "undefined",
+    desc: "The level at which the top of the dam will be drawn. Usually Elev.Top of Dam or Stage.Top of Dam",
+  },
+  {
+    name: "gradientBottom",
+    type: "number",
+    default: "undefined",
+    desc: "The level at which the bottom of the dam gradient will be drawn. Usually Elev.Bottom of Flood or Elev.Bottom of Flood Control or Elev.Top of Conservation",
+  },
+  {
+    name: "gradientTop",
+    type: "number",
+    default: "undefined",
+    desc: "The level at which the top of the dam gradient will be drawn. Usually Elev.Top of Flood or Elev.Top of Flood Control",
+  },
+  {
+    name: "inflow",
+    type: "number",
+    default: "undefined",
+    desc: "The latest value of the inflow timeseries.",
+  },
+  {
+    name: "outflow",
+    type: "number",
+    default: "undefined",
+    desc: "The latest value of the outflow timeseries.",
+  },
+  {
+    name: "pool",
+    type: "number",
+    default: "undefined",
+    desc: "The latest value of the elevation or stage timeseries.",
+  },
+  {
+    name: "powerGeneration",
+    type: "number",
+    default: "undefined",
+    desc: "The latest value of the power generation timeseries. Determines if the turbine graphic is drawn.",
+  },
+  {
+    name: "surcharge",
+    type: "number",
+    default: "undefined",
+    desc: "The latest value of the surcharge release timeseries.",
+  },
+  {
+    name: "tail",
+    type: "number",
+    default: "undefined",
+    desc: "The latest value of the Elevation Tailwater or Stage Tailwater timeseries.",
+  },
+  {
+    name: "infoText",
+    type: "string",
+    default: "undefined",
+    desc: "The name of project",
+  },
+  {
+    name: "latestTime",
+    type: "string",
+    default: "undefined",
+    desc: "The latest time from the Elevation or Stage timeseries",
+  },
+  {
+    name: "levels",
+    type: "array",
+    default: "undefined",
+    desc: "Array of levels to be drawn on the dam Y axis.",
+  },
+  {
+    name: "outflowTotals",
+    type: "array",
+    default: "undefined",
+    desc: "Array of outflow types to be drawn on below the Outflow Icon.",
+  },
+];
+
+export default chartProps;