WV-3117 Charting Feature Styling Updates

e2e/features/charting/charting-test.spec.js

@@ -73,12 +73,10 @@ test('Select an Area of Interest works appropriately', async () => {
   const isChartingEnabled = await page.$('#chart-toggle-button')
   if (isChartingEnabled) {
     await page.locator('#chart-toggle-button').click()
-    const aoiIcon = page.locator('#wv-charting-mode-container > div.charting-aoi-container > h3')
-    await expect(aoiIcon).toHaveText('Select Area of Interest')
-    await page.locator('#wv-charting-mode-container > div.charting-aoi-container > svg').click()
-    await page.mouse.click(300, 300)
-    await page.mouse.click(400, 400)
-    await expect(aoiIcon).toHaveText('Area of Interest Selected')
+    const aoiBtn = page.locator('#wv-charting-mode-container > div.charting-aoi-container > .edit-coordinates')
+    await expect(aoiBtn).toHaveText('Entire Screen')
+    await aoiBtn.click()
+    await expect(aoiBtn).toHaveText('Area Selected')
   }
 })
 
@@ -96,12 +94,12 @@ test('Confirm defaults for time span selection', async () => {
   }
 })
 
-test('Calendar icon opens datepicker modal', async () => {
+test('Date selector opens datepicker modal', async () => {
   await page.goto(multipleDataLayers)
   const isChartingEnabled = await page.$('#chart-toggle-button')
   if (isChartingEnabled) {
     await page.locator('#chart-toggle-button').click()
-    await page.locator('#charting-calendar-container > svg').click()
+    await page.locator('#charting-date-button').click()
     const chartingDateModal = page.locator('#charting_date_modal > div > div > div.modal-header > h5')
     await expect(chartingDateModal).toHaveText('Charting Mode Date Selection')
   }
@@ -116,7 +114,7 @@ test('Info modal opens on mode start & on icon click', async () => {
     await expect(infoModal).toHaveText('Charting Tool')
     await page.locator('#charting_info_modal > div > div > div.modal-header > button').click()
     await expect(infoModal).toHaveCount(0)
-    await page.locator('#charting-info-container > svg').click()
+    await page.locator('#charting-info-container svg').click()
     await expect(infoModal).toHaveText('Charting Tool')
   }
 })

web/js/components/charting/chart-component.js

@@ -12,7 +12,7 @@ function ChartComponent (props) {
   const { data } = liveData;
 
   // Arbitrary array of colors to use
-  const lineColors = ['#8884D8', '#82CA9D', 'orange', 'pink', 'green', 'red', 'yellow', 'aqua', 'maroon'];
+  const lineColors = ['#A3905D', '#82CA9D', 'orange', 'pink', 'green', 'red', 'yellow', 'aqua', 'maroon'];
 
   function formatToThreeDigits(str) {
     return parseFloat(str).toFixed(3);
@@ -143,10 +143,11 @@ function ChartComponent (props) {
             </div>
           </div>
         </div>
-        <div className="charting-discalimer">
-          <strong>NOTE:</strong>
+        <div className="charting-disclaimer">
+          <strong>Note:</strong>
+          <br />
           {' '}
-          Numerical analyses performed on imagery should only be used for initial basic exploratory purposes
+          Numerical analyses performed on imagery should only be used for initial basic exploratory purposes.
         </div>
       </>
     );
@@ -160,8 +161,8 @@ function ChartComponent (props) {
           {' '}
           <Legend />
           {getLineChart(data)}
-          <XAxis dataKey="name" />
-          <YAxis type="number" domain={yAxisValuesArr} />
+          <XAxis dataKey="name" stroke="#a6a5a6" />
+          <YAxis type="number" stroke="#a6a5a6" domain={yAxisValuesArr} />
           <Legend />
         </LineChart>
       </div>

web/js/components/charting/charting-date-selector.js

@@ -37,7 +37,7 @@ function ChartingDateSelector (props) {
   }
 
   return (
-    <div className="charting-date-container">
+    <div className="charting-date-container wv-date-range-selector">
       {/* single date mode */}
       {timeSpanSelection === 'date'
         ? (

web/js/components/charting/charting-info.js

@@ -4,19 +4,20 @@ function ChartingInfo(props) {
   return (
     <div className="charting-info-container">
       <div className="charting-info-text">
-        <p className="charting-info">
-          Click on the pencil icon to click and drag a bounding box on the map to define an Area of Interest (AOI).
-        </p>
+        <p className="charting-info">The Charting Tool provides the option to create a line chart for a date range showing change over time, and statistics for a single date (minimum, maximum, mean, and standard deviation) for an area of interest.</p>
 
-        <p className="charting-info">In Date Range mode (the default mode), select the calendar icon near the bottom of the Layers panel and increment the values in the resulting window to change their dates. To use a single date instead of a range, choose One Date at the bottom of the Layers panel.</p>
+        <p className="charting-info">Select the layer to be charted by clicking on the radio button to the left of the layer name.</p>
 
-        <p className="charting-info">Select the active layer via the toggle icon on its left. Click on Request Chart & you will see additional data as you hover over points on the enlarged chart.</p>
+        <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">Exit the charting mode by selecting Exit Charting near the botom of the Layers Panel.</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">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>
+
       </div>
     </div>
   );

web/js/components/charting/simple-statistics.js

@@ -68,10 +68,11 @@ function SimpleStatistics(props) {
           </div>
         </div>
       </div>
-      <div className="charting-discalimer">
-        <strong>NOTE:</strong>
+      <div className="charting-disclaimer">
+        <strong>Note:</strong>
+        <br />
         {' '}
-        Numerical analyses performed on imagery should only be used for initial basic exploratory purposes
+        Numerical analyses performed on imagery should only be used for initial basic exploratory purposes.
       </div>
     </>
   );