feat: [CCM-28203]: Switch from Area Chart to Line Chart (#168)

* feat: [CCM-28203]: Switch from Area Chart to Line Chart

* feat: [CCM-28203]: Update Label for Last 30 Days

Author: rajarshee-harness

packages/app/package.json

@@ -44,7 +44,7 @@
     "@harnessio/backstage-plugin-harness-srm": "^0.2.0",
     "@harnessio/backstage-plugin-harness-chaos": "^0.2.0",
     "@harnessio/backstage-plugin-harness-iacm": "0.3.0",
-    "@harnessio/backstage-plugin-harness-ccm": "^0.1.0",
+    "@harnessio/backstage-plugin-harness-ccm": "^0.1.3",
     "@harnessio/backstage-plugin-fme-feature-flags": "^0.2.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/harness-ccm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harnessio/backstage-plugin-harness-ccm",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",

plugins/harness-ccm/src/components/PerspectivesChart/PerspectivesChart.tsx

@@ -8,8 +8,8 @@ import {
   Tooltip,
   Legend,
   ResponsiveContainer,
-  AreaChart,
-  Area,
+  LineChart,
+  Line,
 } from 'recharts';
 import { CircularProgress, makeStyles } from '@material-ui/core';
 import { TimeSeriesDataPoints, ViewVisualization } from '../../api/types';
@@ -117,7 +117,7 @@ const PerspectivesChart: React.FC<PerspectivesChartProps> = ({
             ))}
           </BarChart>
         ) : (
-          <AreaChart
+          <LineChart
             width={730}
             height={250}
             data={formattedData}
@@ -129,18 +129,19 @@ const PerspectivesChart: React.FC<PerspectivesChartProps> = ({
             <Tooltip formatter={tickFormatter} />
             <Legend />
             {keys.map((key, idx) => (
-              <Area
+              <Line
                 type="monotone"
                 key={key}
                 dataKey={key}
-                fill={
+                stroke={
                   key === 'Others'
                     ? OTHERS_COLOR_HEX
                     : CE_COLOR_CONST_NEW[idx % CE_COLOR_CONST_NEW.length]
                 }
+                strokeWidth={2}
               />
             ))}
-          </AreaChart>
+          </LineChart>
         )}
       </ResponsiveContainer>
     </div>

plugins/harness-ccm/src/utils/PerpsectiveUtils.tsx

@@ -221,7 +221,7 @@ const LAST_7_DAYS = {
 const LAST_30_DAYS = {
   label: DATE_RANGE_SHORTCUTS_NAME.LAST_30_DAYS,
   dateRange: DATE_RANGE_SHORTCUTS.LAST_30_DAYS,
-  dateFormat: ['MMM YYYY'],
+  dateFormat: ['MMM D', 'MMM D'],
 };
 
 const CURRENT_MONTH = {