creating a med line and changing position of radar data

MinisterioPublicoRJ · May 12, 2020 · f36d828 · f36d828
1 parent 3311e4b
commit f36d828
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/src/components/graphs/PerformanceChart.jsx b/src/components/graphs/PerformanceChart.jsx
@@ -109,6 +109,18 @@ const generateAxis = data =>
     })
     .sort((a, b) => a.order - b.order);
 
+const generateMedData = data => {
+  return data
+    .map(({ med }) => {
+      const { position } = axisLabelsTable[med.x];
+      const { order } = labelPositionsTable[position];
+
+      return { ...med, order };
+    })
+    .sort((a, b) => a.order - b.order)
+    .map(({ y, x }) => ({ y, x }));
+};
+
 const propTypes = {
   data: PropTypes.arrayOf(
     PropTypes.shape({ x: PropTypes.string, y: PropTypes.number, label: PropTypes.number }),
@@ -120,6 +132,10 @@ function PerformanceChart({ data }) {
   const areaData = generateAreaData(data);
   const xAxis = generateAxis(data);
   const grid = generateGrid(xAxis);
+  const medData = generateMedData(data);
+
+  console.log('>>>>medianas:', medData);
+  console.log('>>>area', areaData);
 
   // TODO: animate VictoryChart
   return (
@@ -177,6 +193,18 @@ function PerformanceChart({ data }) {
           }}
           labelComponent={<AreaLabel />}
         />
+        <VictoryArea
+          data={medData}
+          style={{
+            data: {
+              fill: 'transparent',
+              stroke: '#c43a31',
+              strokeWidth: 2,
+              strokeLinecap: 'round',
+            },
+          }}
+          labelComponent={<AreaLabel />}
+        />
       </VictoryChart>
     </>
   );

diff --git a/src/sections/PerformanceRadar/index.jsx b/src/sections/PerformanceRadar/index.jsx
@@ -29,16 +29,20 @@ class PerformanceRadar extends React.Component {
   cleanGraphData(data) {
     const chartData = Object.entries(data)
       .filter(cat => cat[0] !== 'meta')
-      .map(([category, { variations, percentages, numbers }]) => ({
+      .map(([category, { maxValues, averages, variations, percentages, numbers }]) => ({
         axis: {
           category,
-          value: variations == null || variations === -1 ? '—' : formatPercent(variations),
-          isAboveAverage: variations == null || variations === -1 ? null : variations >= 0,
+          value: numbers, // variations == null || variations === -1 ? '—' : formatPercent(variations),
+          isAboveAverage: true, // variations == null || variations === -1 ? null : variations >= 0,
         },
         chart: {
           x: category,
           y: percentages * 100,
-          label: numbers,
+          label: `${Math.round(percentages * 100)}%`,
+        },
+        med: {
+          x: category,
+          y: 100 * (averages / maxValues),
         },
       }));