[C] supernovae 3 vector

packages/epo-widget-lib/CHANGELOG.md

@@ -85,3 +85,10 @@
 
 - add unit tests to `useAxis`
 - move x axis tick definition to `defaults` for `LightCurvePlot`
+
+# 1.0.0
+
+- update i18next
+- update TypeScript
+- changes to `LightCurve` plot
+- change `SupernovaeThreeVector` labels to mega-lightyears

packages/epo-widget-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "0.10.3",
+  "version": "1.0.0",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",

packages/epo-widget-lib/public/localeStrings/en/epo-widget-lib.json

@@ -83,19 +83,19 @@
   "supernova_three_vector": {
     "histogram": {
       "title": "Supernova Distances",
-      "x_label": "Distance [kpc]",
-      "bar_label_one": "{{binMin}} to {{binMax}} kiloparsecs: {{count}} supernova",
-      "bar_label_other": "{{binMin}} to {{binMax}} kiloparsecs: {{count}} supernovae"
+      "x_label": "Distance [Mlyr]",
+      "bar_label_one": "{{binMin}} to {{binMax}} mega-lightyears: {{count}} supernova",
+      "bar_label_other": "{{binMin}} to {{binMax}} mega-lightyears: {{count}} supernovae"
     },
     "slider": {
       "label": "Select visible range",
-      "valueLabel": "{{value}} kiloparsecs"
+      "valueLabel": "{{value}} mega-lightyears"
     },
     "skymap": {
       "title": "Supernova Distribution",
       "description": "$t(supernova_three_vector.skymap.supernova_count, {\"count\": {{supernovaCount}}, \"min\": {{min}}, \"max\": {{max}}}) $t(supernova_three_vector.skymap.user_supernova_count, {\"count\": {{userObjectCount}}})",
-      "supernova_count_one": "Sky map projection showing {{count}} supernova between the distances of {{min}} and {{max}} kiloparsecs.",
-      "supernova_count_other": "Sky map projection showing {{count}} supernovae between the distances of {{min}} and {{max}} kiloparsecs.",
+      "supernova_count_one": "Sky map projection showing {{count}} supernova between the distances of {{min}} and {{max}} mega-lightyears.",
+      "supernova_count_other": "Sky map projection showing {{count}} supernovae between the distances of {{min}} and {{max}} mega-lightyears.",
       "user_supernova_count_zero": "None of your supernovae are visible.",
       "user_supernova_count_one": "{{count}} of your supernovae is visible near {{coords}}.",
       "user_supernova_count_other": "{{count}} of your supernovae are visible near {{coords}}."

packages/epo-widget-lib/src/charts/Base/styles.ts

@@ -38,10 +38,12 @@ export const Filler = styled.div`
 `;
 
 export const SVG = styled.svg`
+  font-size: 1em;
   grid-area: chart;
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: var(--aspect-ratio);
+  overflow: visible;
   z-index: 1;
 `;
 

packages/epo-widget-lib/src/charts/ScatterPlot/styles.ts

@@ -5,7 +5,6 @@ import BaseChart from "../Base";
 
 export const Chart = styled(BaseChart)`
   font-size: 1.5em;
-  overflow: visible;
 
   @container (
 min-width: ${token("BREAK_PHABLET_MIN")}

packages/epo-widget-lib/src/widgets/SupernovaThreeVector/Histogram/index.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, useState } from "react";
+import { FunctionComponent, useId, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ChartMargin,
@@ -51,7 +51,7 @@ const DistanceHistogram: FunctionComponent<DistanceHistogramProps> = ({
   const [hoveredIndex, setHoveredIndex] = useState<number>();
 
   const yRoot = yScale(yDomain[0]);
-  const xAxisLabelId = "xAxisLabel";
+  const xAxisLabelId = useId();
 
   const hasTooltip = typeof hoveredIndex === "number";
 

packages/epo-widget-lib/src/widgets/SupernovaThreeVector/index.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, useState } from "react";
+import { FunctionComponent, useId, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { nice, max, min } from "d3-array";
 import HorizontalSlider from "@rubin-epo/epo-react-lib/HorizontalSlider";
@@ -23,15 +23,14 @@ const SupernovaThreeVector: FunctionComponent<SupernovaThreeVectorProps> = ({
   step = 100,
 }) => {
   const { t } = useTranslation();
+  const liveDescriptionId = useId();
   const margin: ChartMargin = {
     top: 30,
     bottom: 30,
     left: 50,
     right: 0,
   };
 
-  const liveDescriptionId = "skyMapDescription";
-
   const width = 600;
   const height = width / 1.6;
   const xRange = [margin.left, width - margin.right];
@@ -40,14 +39,13 @@ const SupernovaThreeVector: FunctionComponent<SupernovaThreeVectorProps> = ({
   const xTicks = 6;
   const yTicks = 7;
 
+  const yValues = histogramData.map(({ value }) => value);
   const yMin = 0;
-  const yMax =
-    max(histogramData, (d) => d.value) ||
-    Math.max(...histogramData.map(({ value }) => value));
-  const xMin = min(histogramData, (d) => d.bin) || 0;
-  const xMax =
-    max(histogramData, (d) => d.bin) ||
-    Math.max(...histogramData.map(({ bin }) => bin));
+  const yMax = max(yValues) || Math.max(...yValues);
+
+  const xValues = histogramData.map(({ bin }) => bin);
+  const xMin = min(xValues) || 0;
+  const xMax = max(xValues) || Math.max(...xValues);
 
   const xDomain = nice(xMin, xMax, xTicks);
   const yDomain = nice(yMin, yMax || yMin, yTicks);
@@ -122,8 +120,8 @@ const SupernovaThreeVector: FunctionComponent<SupernovaThreeVectorProps> = ({
               t("supernova_three_vector.slider.valueLabel", { value: valueNow })
             }
             color="var(--turquoise85,#12726D)"
-            minLabel={`${xMin} kpc`}
-            maxLabel={`${xMax} kpc`}
+            minLabel={`${xMin} Mlyr`}
+            maxLabel={`${xMax} Mlyr`}
             onChangeCallback={(value) =>
               Array.isArray(value) && setActiveRange(value)
             }

packages/epo-widget-lib/src/widgets/SupernovaThreeVector/styles.ts

@@ -46,8 +46,7 @@ export const HistogramContainer = styled.div`
 `;
 
 export const Histogram = styled(DistanceHistogram)`
-  font-size: 0.75;
-  overflow: visible;
+  font-size: 0.75em;
 
   @container (
     min-width: ${token("BREAK_PHABLET_MIN")}