Feature info chart fixes.

TerriaJS · May 14, 2024 · 152da79 · 152da79
1 parent a04930a
commit 152da79
Show file tree

Hide file tree

Showing 15 changed files with 362 additions and 352 deletions.
diff --git a/lib/ModelMixins/ChartableMixin.ts b/lib/ModelMixins/ChartableMixin.ts
@@ -9,6 +9,7 @@ import ModelTraits from "../Traits/ModelTraits";
 type Scale = "linear" | "time";
 
 export interface ChartAxis {
+  name: string;
   scale: Scale;
   units?: string;
 }
@@ -46,12 +47,18 @@ export interface ChartPoint {
   isSelected?: boolean;
 }
 
+/**
+ * Describes a quantity that can be rendered on the chart along its y-axis.
+ */
 export interface ChartItem {
+  // id of the chart item - for table mixins this is the same a the id of the column
+  id: string;
   name: string;
   categoryName?: string;
   key: string;
   item: Model<ModelTraits>;
   type: ChartItemType;
+  units?: string;
   showInChartPanel: boolean;
   isSelectedInWorkbench: boolean;
   xAxis: ChartAxis;

diff --git a/lib/ModelMixins/DiscretelyTimeVaryingMixin.ts b/lib/ModelMixins/DiscretelyTimeVaryingMixin.ts
@@ -352,12 +352,13 @@ function DiscretelyTimeVaryingMixin<
       const colorId = `color-${this.name}`;
       return {
         item: this,
+        id: this.name || "",
         name: this.name || "",
         categoryName: this.name,
         key: `key${this.uniqueId}-${this.name}`,
         type: this.chartType || "momentLines",
         glyphStyle: this.chartGlyphStyle,
-        xAxis: { scale: "time" },
+        xAxis: { name: "Time", scale: "time" },
         points,
         domain: { ...calculateDomain(points), y: [0, 1] },
         showInChartPanel: this.show && this.showInChartPanel,

diff --git a/lib/ModelMixins/TableMixin.ts b/lib/ModelMixins/TableMixin.ts
@@ -376,14 +376,16 @@ function TableMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
           : xColumn.valuesAsNumbers.values;
 
       const xAxis: ChartAxis = {
+        name: xColumn.title || xColumn.name,
         scale: xColumn.type === TableColumnType.time ? "time" : "linear",
         units: xColumn.units
       };
 
       return filterOutUndefined(
         lines.map((line) => {
+          const yColumnId = line.yAxisColumn;
           const yColumn = this.findColumnByName(line.yAxisColumn);
-          if (yColumn === undefined) {
+          if (yColumnId === undefined || yColumn === undefined) {
             return undefined;
           }
           const yValues = yColumn.valuesAsNumbers.values;
@@ -403,16 +405,17 @@ function TableMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
           const colorId = `color-${this.uniqueId}-${this.name}-${yColumn.name}`;
 
           return {
+            id: yColumnId,
             item: this,
             name: line.name ?? yColumn.title,
             categoryName: this.name,
             key: `key${this.uniqueId}-${this.name}-${yColumn.name}`,
             type: this.chartType ?? "line",
+            units: yColumn.units,
             glyphStyle: this.chartGlyphStyle ?? "circle",
             xAxis,
             points,
             domain: calculateDomain(points),
-            units: yColumn.units,
             isSelectedInWorkbench: line.isSelectedInWorkbench,
             showInChartPanel: this.show && line.isSelectedInWorkbench,
             updateIsSelectedInWorkbench: (isSelected: boolean) => {

diff --git a/lib/ReactViews/Custom/Chart/ChartExpandAndDownloadButtons.tsx b/lib/ReactViews/Custom/Chart/ChartExpandAndDownloadButtons.tsx
@@ -1,14 +1,16 @@
 import classNames from "classnames";
 import { TFunction } from "i18next";
-import { action, observable, runInAction, makeObservable } from "mobx";
+import { action, makeObservable, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
+import styled, { useTheme } from "styled-components";
 import filterOutUndefined from "../../../Core/filterOutUndefined";
 import ChartableMixin from "../../../ModelMixins/ChartableMixin";
 import hasTraits from "../../../Models/Definition/hasTraits";
 import Terria from "../../../Models/Terria";
-import Icon from "../../../Styled/Icon";
+import { Button, StyledButton } from "../../../Styled/Button";
+import Icon, { StyledIcon } from "../../../Styled/Icon";
 import UrlTraits from "../../../Traits/TraitsClasses/UrlTraits";
 import Styles from "./chart-expand-and-download-buttons.scss";
 
@@ -164,26 +166,20 @@ const ExpandAndDownloadDropdowns = function (props: {
   };
 
   return (
-    <div
-      className={classNames(Styles.chartExpand, {
-        [Styles.raiseToTitle]: props.raiseToTitle
-      })}
-    >
-      <div className={Styles.chartDropdownButton}>
-        <Dropdown
-          selectOption={props.onExpand}
-          options={props.sourceNames.map((name) => ({ name }))}
-          theme={expandDropdownTheme}
-        >
-          {props.t("chart.expand") + " ▾"}
+    <ExpandAndDownloadContainer raiseToTitle={props.raiseToTitle}>
+      <Dropdown
+        selectOption={props.onExpand}
+        options={props.sourceNames.map((name) => ({ name }))}
+        theme={expandDropdownTheme}
+      >
+        {props.t("chart.expand") + " ▾"}
+      </Dropdown>
+      {props.canDownload && (
+        <Dropdown options={props.downloads} theme={downloadDropdownTheme}>
+          {props.t("chart.download") + " ▾"}
         </Dropdown>
-        {props.canDownload && (
-          <Dropdown options={props.downloads} theme={downloadDropdownTheme}>
-            {props.t("chart.download") + " ▾"}
-          </Dropdown>
-        )}
-      </div>
-    </div>
+      )}
+    </ExpandAndDownloadContainer>
   );
 };
 
@@ -192,26 +188,52 @@ const ExpandAndDownloadButtons = function (props: {
   downloadUrl?: string;
   t: TFunction;
 }) {
+  const theme = useTheme();
   return (
-    <div className={Styles.chartExpand}>
-      <button
-        type="button"
-        className={Styles.btnChartExpand}
-        onClick={props.onExpand}
-      >
+    <ExpandAndDownloadContainer>
+      <ButtonChartExpand type="button" onClick={props.onExpand}>
         {props.t("chart.expand")}
-      </button>
+      </ButtonChartExpand>
       {props.downloadUrl && (
-        <a
-          download
-          className={classNames(Styles.btnSmall, Styles.aDownload)}
-          href={props.downloadUrl}
-        >
-          <Icon glyph={Icon.GLYPHS.download} />
-        </a>
+        <DownloadLink download href={props.downloadUrl}>
+          <StyledIcon
+            fillColor={theme.textLight}
+            glyph={Icon.GLYPHS.download}
+          />
+        </DownloadLink>
       )}
-    </div>
+    </ExpandAndDownloadContainer>
   );
 };
 
+const ExpandAndDownloadContainer = styled.div<{ raiseToTitle?: boolean }>`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  ${(props) => props.raiseToTitle && `margin-top: -21px;`}
+`;
+
+const ButtonChartExpand = styled(Button).attrs({ primary: true })`
+  border-radius: 3px;
+  padding: 1px 8px;
+  min-height: unset;
+  margin-right: 5px;
+`;
+
+const DownloadLink = styled(StyledButton).attrs(() => ({
+  as: "a",
+  primary: true
+}))`
+  text-decoration: none;
+  border-radius: 2px;
+  padding: 1px 8px;
+  min-height: unset;
+
+  svg {
+    height: 20px;
+    width: 20px;
+  }
+`;
+
 export default withTranslation()(ChartExpandAndDownloadButtons);