Added warning text

nasa-gibs · Feb 21, 2025 · 2274738 · 2274738
1 parent bdeb720
commit 2274738
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 40 deletions.
diff --git a/web/js/components/charting/chart-component.js b/web/js/components/charting/chart-component.js
@@ -9,7 +9,14 @@ function ChartComponent (props) {
     liveData,
   } = props;
 
-  const { data, unit } = liveData;
+  const {
+    data,
+    unit,
+    startDate,
+    endDate,
+    numRangeDays,
+    isTruncated,
+  } = liveData;
 
   // Arbitrary array of colors to use
   const lineColors = ['#A3905D', '#82CA9D', 'orange', 'pink', 'green', 'red', 'yellow', 'aqua', 'maroon'];
@@ -156,12 +163,6 @@ function ChartComponent (props) {
             </div>
           </div>
         </div>
-        <div className="charting-disclaimer">
-          <strong>Note:</strong>
-          <br />
-          {' '}
-          Numerical analyses performed on imagery should only be used for initial basic exploratory purposes.
-        </div>
       </>
     );
   }
@@ -170,33 +171,63 @@ function ChartComponent (props) {
 
   return (
     <div className="charting-chart-container">
-      <div className="charting-chart-text">
-        <LineChart
-          width={600}
-          height={300}
-          data={data}
-          margin={{
-            top: 20,
-            right: 20,
-            left: 20,
-            bottom: 20,
-          }}
-        >
-          <Tooltip formatter={(value, name) => [value, `${name}${formattedUnit}`]} />
-          {' '}
-          {getLineChart(data)}
-          <XAxis dataKey="name" stroke="#a6a5a6" />
-          <YAxis type="number" stroke="#a6a5a6" domain={yAxisValuesArr} tick={renderCustomAxisTick} />
-          <Legend formatter={(value) => `${value}${formattedUnit}`} />
-        </LineChart>
+      <div className="charting-chart-inner">
+        <div className="charting-chart-text">
+          <LineChart
+            width={600}
+            height={300}
+            data={data}
+            margin={{
+              top: 20,
+              right: 20,
+              left: 20,
+              bottom: 20,
+            }}
+          >
+            <Tooltip formatter={(value, name) => [value, `${name}${formattedUnit}`]} />
+            {' '}
+            {getLineChart(data)}
+            <XAxis dataKey="name" stroke="#a6a5a6" />
+            <YAxis type="number" stroke="#a6a5a6" domain={yAxisValuesArr} tick={renderCustomAxisTick} />
+            <Legend formatter={(value) => `${value}${formattedUnit}`} />
+          </LineChart>
+        </div>
+        <div className="charting-stat-text">
+          <h3>
+            Average Statistics
+            {formattedUnit}
+          </h3>
+          <br />
+          {getQuickStatistics(data)}
+        </div>
       </div>
-      <div className="charting-stat-text">
-        <h3>
-          Average Statistics
-          {formattedUnit}
-        </h3>
-        <br />
-        {getQuickStatistics(data)}
+      <div className="charting-disclaimer">
+        <strong>Note: </strong>
+        <span>Numerical analyses performed on imagery should only be used for initial basic exploratory purposes.</span>
+        {isTruncated
+        && (
+          <>
+            <br />
+            <br />
+            <div>
+              Note: As part of this beta feature release, the number of data points plotted between
+              <b>
+                {` ${startDate} `}
+              </b>
+              and
+              <b>
+                {` ${endDate} `}
+              </b>
+              has been reduced from
+              <b>
+                {` ${numRangeDays} `}
+              </b>
+              to
+              <b> 20</b>
+              .
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/web/js/components/charting/charting-info.js b/web/js/components/charting/charting-info.js
@@ -23,13 +23,11 @@ function ChartingInfo(props) {
 
         <p className="charting-info">The default area of interest is the entire screen, click on the “Entire Screen” button to change to a bounding box area of interest selection. Click on any box at the edge or corner of the selection box to change the size and shape.</p>
 
-        <p className="charting-info">The default date selection is a date range of the past 7 days. Click on the dates to change the date range in the Charting Mode Date Selection box. Click on the red “Generate Chart” button to generate a chart of change over time.</p>
+        <p className="charting-info">The default date selection is a date range of the past 7 days. Click on the dates to change the date range in the Charting Mode Date Selection box. Click on the red “Generate Chart” button to generate a chart of change over time. (As part of this beta feature release, the number of plotted data points may be reduced if it exceeds 20 points).</p>
 
         <p className="charting-info">To select a single date, select “One Date”. Click on the date to change the date in date selection box.  Click on the red “Generate Statistics” button to generate a list of statistics including min, max, mean, and standard deviation.</p>
 
-        <h3>NOTE:</h3>
-
-        <p className="charting-disclaimer">Numerical analyses performed on imagery should only be used for initial basic exploratory purposes. Results from these analyses should not be used for formal scientific study since the imagery is generally of lower precision than the original data and has often had additional processing steps applied to it, e.g. projection into a different coordinate system.</p>
+        <p className="charting-disclaimer">NOTE: Numerical analyses performed on imagery should only be used for initial basic exploratory purposes. Results from these analyses should not be used for formal scientific study since the imagery is generally of lower precision than the original data and has often had additional processing steps applied to it, e.g. projection into a different coordinate system.</p>
 
       </div>
     </div>

diff --git a/web/js/components/sidebar/charting-mode-options.js b/web/js/components/sidebar/charting-mode-options.js
@@ -38,6 +38,7 @@ const AOIFeatureObj = {};
 const vectorLayers = {};
 const sources = {};
 let init = false;
+const STEP_NUM = 20;
 
 function ChartingModeOptions(props) {
   const {
@@ -201,7 +202,7 @@ function ChartingModeOptions(props) {
       timestamp: startDateForImageStat, // start date
       endTimestamp: endDateForImageStat, // end date
       type: timeSpan === 'range' ? 'series' : 'date',
-      steps: 20, // the number of days selected within a given range/series. Use '1' for just the start and end date, '2' for start date, end date and middle date, etc.
+      steps: STEP_NUM, // the number of days selected within a given range/series. Use '1' for just the start and end date, '2' for start date, end date and middle date, etc.
       layer: layerInfo.id, // Layer to be pulled from gibs api. e.g. 'GHRSST_L4_MUR_Sea_Surface_Temperature'
       colormap: `${layerInfo.palette.id}.xml`, // Colormap to use to decipher layer. e.g. 'GHRSST_Sea_Surface_Temperature.xml'
       areaOfInterestCoords: AOIForImageStat, // Bounding box of latitude and longitude.
@@ -305,7 +306,9 @@ function ChartingModeOptions(props) {
       const uriParameters = getImageStatRequestParameters(layerInfo, timeSpanSelection);
       const requestURI = getImageStatStatsRequestURL(uriParameters);
       const data = await getImageStatData(requestURI);
-      // TEMP
+      // SMALL DATA
+      // const data = {"ok":true,"body":{"mean":{"2025-01-16T00:00:00Z":97.07191011235955,"2025-01-17T00:00:00Z":83.35759876543207,"2025-01-18T00:00:00Z":116.82821219135805,"2025-01-19T00:00:00Z":123.08370340999208,"2025-01-20T00:00:00Z":94.90760416666666,"2025-01-21T00:00:00Z":107.88121683763708,"2025-01-22T00:00:00Z":107.39176388888889,"2025-01-23T00:00:00Z":103.96806712962965,"2025-01-24T00:00:00Z":100.8427979799023,"2025-01-25T00:00:00Z":96.70689583333335,"2025-01-26T00:00:00Z":95.49105417891643,"2025-01-27T00:00:00Z":96.38790972222222,"2025-01-28T00:00:00Z":92.7621311728395,"2025-01-29T00:00:00Z":93.29744975716811,"2025-01-30T00:00:00Z":88.83217669753087,"2025-01-31T00:00:00Z":96.12559726962458},"median":{"2025-01-16T00:00:00Z":"96.6","2025-01-17T00:00:00Z":"84.0","2025-01-18T00:00:00Z":"112.0","2025-01-19T00:00:00Z":"120.4","2025-01-20T00:00:00Z":"96.6","2025-01-21T00:00:00Z":"106.4","2025-01-22T00:00:00Z":"107.8","2025-01-23T00:00:00Z":"105.0","2025-01-24T00:00:00Z":"98.0","2025-01-25T00:00:00Z":"96.6","2025-01-26T00:00:00Z":"96.6","2025-01-27T00:00:00Z":"92.4","2025-01-28T00:00:00Z":"92.4","2025-01-29T00:00:00Z":"92.4","2025-01-30T00:00:00Z":"86.8","2025-01-31T00:00:00Z":"95.2"},"max":{"2025-01-16T00:00:00Z":98,"2025-01-17T00:00:00Z":93.8,"2025-01-18T00:00:00Z":264.6,"2025-01-19T00:00:00Z":158.2,"2025-01-20T00:00:00Z":100.8,"2025-01-21T00:00:00Z":117.6,"2025-01-22T00:00:00Z":121.8,"2025-01-23T00:00:00Z":117.6,"2025-01-24T00:00:00Z":113.4,"2025-01-25T00:00:00Z":105,"2025-01-26T00:00:00Z":96.6,"2025-01-27T00:00:00Z":126,"2025-01-28T00:00:00Z":102.2,"2025-01-29T00:00:00Z":102.2,"2025-01-30T00:00:00Z":102.2,"2025-01-31T00:00:00Z":106.4},"min":{"2025-01-16T00:00:00Z":0,"2025-01-17T00:00:00Z":0,"2025-01-18T00:00:00Z":0,"2025-01-19T00:00:00Z":0,"2025-01-20T00:00:00Z":0,"2025-01-21T00:00:00Z":0,"2025-01-22T00:00:00Z":0,"2025-01-23T00:00:00Z":0,"2025-01-24T00:00:00Z":0,"2025-01-25T00:00:00Z":0,"2025-01-26T00:00:00Z":0,"2025-01-27T00:00:00Z":0,"2025-01-28T00:00:00Z":0,"2025-01-29T00:00:00Z":0,"2025-01-30T00:00:00Z":0,"2025-01-31T00:00:00Z":0},"stdev":{"2025-01-16T00:00:00Z":0.6617967989920854,"2025-01-17T00:00:00Z":3.220849128819256,"2025-01-18T00:00:00Z":29.675523832283183,"2025-01-19T00:00:00Z":14.310925522070042,"2025-01-20T00:00:00Z":3.5598765259981993,"2025-01-21T00:00:00Z":4.926791702701727,"2025-01-22T00:00:00Z":5.19726866834092,"2025-01-23T00:00:00Z":6.330286539196557,"2025-01-24T00:00:00Z":5.311816187987275,"2025-01-25T00:00:00Z":3.4549860163839394,"2025-01-26T00:00:00Z":1.7003223073187046,"2025-01-27T00:00:00Z":9.102476055312035,"2025-01-28T00:00:00Z":3.6813294651446005,"2025-01-29T00:00:00Z":3.0254224490129413,"2025-01-30T00:00:00Z":5.538322354812423,"2025-01-31T00:00:00Z":4.696937503618028},"stderr":"0.008995753703555322","hist":[["77.0","1281972"],["95.76","1129490"],["114.52000000000001","153827"],["133.28","34408"],["152.04000000000002","15515"],["170.8","4840"],["189.56","1650"],["208.32000000000002","0"],["227.08","1650"],["245.84","3300"]]}};
+      // LARGE DATA
       // const data = {"ok": true, "body": {"mean": {"2024-12-26T00:00:00Z": 93.63675308641973, "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": 98.82166280864197, "2024-12-29T00:00:00Z": 112.49727376827762, "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": 100.86907306242412, "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": 87.06832793209877, "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": 92.68513657407406, "2025-01-08T00:00:00Z": 94.09509044982106, "2025-01-09T00:00:00Z": 95.70309233791751, "2025-01-10T00:00:00Z": 90.53262577160493, "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": 106.26332069255311, "2025-01-29T00:00:00Z": 94.04687768958594}, "median": {"2024-12-26T00:00:00Z": "92.4", "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": "92.4", "2024-12-29T00:00:00Z": "107.8", "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": "100.8", "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": "85.4", "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": "92.4", "2025-01-08T00:00:00Z": "93.8", "2025-01-09T00:00:00Z": "95.2", "2025-01-10T00:00:00Z": "88.2", "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": "107.8", "2025-01-29T00:00:00Z": "93.8"}, "max": {"2024-12-26T00:00:00Z": 109.2, "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": 337.4, "2024-12-29T00:00:00Z": 161.0, "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": 116.2, "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": 102.2, "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": 105.0, "2025-01-08T00:00:00Z": 116.2, "2025-01-09T00:00:00Z": 103.6, "2025-01-10T00:00:00Z": 119.0, "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": 126.0, "2025-01-29T00:00:00Z": 105.0}, "min": {"2024-12-26T00:00:00Z": 0, "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": 0, "2024-12-29T00:00:00Z": 0, "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": 0, "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": 0, "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": 0, "2025-01-08T00:00:00Z": 0, "2025-01-09T00:00:00Z": 0, "2025-01-10T00:00:00Z": 0, "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": 0, "2025-01-29T00:00:00Z": 0}, "stdev": {"2024-12-26T00:00:00Z": 5.573183295940014, "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": 29.669696188643815, "2024-12-29T00:00:00Z": 14.394170942103589, "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": 3.511249891935887, "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": 4.900565849526661, "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": 3.7435652287331145, "2025-01-08T00:00:00Z": 4.800023185115589, "2025-01-09T00:00:00Z": 3.44325727950279, "2025-01-10T00:00:00Z": 7.34434947432395, "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": 9.15082906276502, "2025-01-29T00:00:00Z": 3.82158766280483}, "stderr": "0.00798107110201455", "hist": [["78.4", "2275025"], ["104.30000000000001", "285651"], ["130.2", "16565"], ["156.1", "4885"], ["182.0", "1026"], ["207.9", "1044"], ["233.79999999999998", "3920"], ["259.7", "986"], ["285.6", "0"], ["311.5", "969"]]}};
 
       if (!data.ok) {
@@ -328,11 +331,16 @@ function ChartingModeOptions(props) {
 
       if (timeSpanSelection === 'range') {
         const rechartsData = formatGIBSDataForRecharts(dataToRender);
+        const numRangeDays = Math.floor((Date.parse(initialEndDate) - Date.parse(initialStartDate)) / 86400000);
         displayChart({
           title: dataToRender.title,
           subtitle: dataToRender.subtitle,
           unit: dataToRender.unit,
           data: rechartsData,
+          startDate: primaryDate,
+          endDate: secondaryDate,
+          numRangeDays,
+          isTruncated: numRangeDays > STEP_NUM,
         });
         updateChartRequestStatus(false);
       } else {

diff --git a/web/scss/features/sidebar.scss b/web/scss/features/sidebar.scss
@@ -697,7 +697,7 @@ button#charting-simple-stats-button {
   text-decoration: underline !important;
 }
 
-.charting-chart-container {
+.charting-chart-inner {
   display: flex;
   justify-content: space-between;
 }