visualize global score and net score

otoroshi/javascript/src/components/inputs/Table.js

@@ -148,10 +148,10 @@ export class Table extends Component {
     return (this.state.showAddForm || this.state.showEditForm
       ? this.props.fetchItems()
       : this.props.fetchItems({
-          ...paginationState,
-          pageSize: this.state.rowsPerPage,
-          page: page + 1,
-        })
+        ...paginationState,
+        pageSize: this.state.rowsPerPage,
+        page: page + 1,
+      })
     ).then((rawItems) => {
       if (Array.isArray(rawItems)) {
         this.setState({
@@ -566,8 +566,11 @@ export class Table extends Component {
             </div>
             <div className="rrow" style={{ position: 'relative' }}>
               <ReactTable
+                style={{
+                  border: "none"
+                }}
                 ref={this.tableRef}
-                className="fulltable -striped -highlight"
+                className={this.props.v2 ? "fulltable" : "fulltable -striped -highlight"}
                 manual
                 pages={this.state.pages}
                 data={this.state.items}

otoroshi/javascript/src/extensions/greenscore/GlobalScore.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { calculateGreenScore, getRankAndLetterFromScore } from "./util";
+
+export function GlobalScore(props) {
+    const score = props.groups.reduce((acc, group) => {
+        return acc + group.routes.reduce((acc, route) => calculateGreenScore(route.rulesConfig).score + acc, 0) / group.routes.length;
+    }, 0) / props.groups.length;
+
+    const { letter, rank, ...rest } = getRankAndLetterFromScore(score);
+
+    return <div
+        className="text-center ms-2"
+        style={{
+            flex: .5,
+            maxWidth: 250,
+            background: 'var(--bg-color_level2)',
+            borderRadius: '.2rem',
+            padding: '0 .5rem',
+            fontSize: '10rem',
+            position: 'relative'
+        }}>
+        <div style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            justifyContent: 'center'
+        }}>
+            {!props.raw && <>{letter !== "@" ? letter : '-'} <i className="fa fa-leaf"
+                style={{ color: rank, fontSize: '6rem' }} />
+            </>}
+            {props.raw && <div>
+                <span style={{ fontSize: '5rem' }}>{rest.score}</span>
+                <span style={{ fontSize: '1rem', fontWeight: 'bold' }}>{`/${props.groups.length * 6000}`}</span>
+            </div>}
+        </div>
+        <h3 style={{ color: 'var(--color_level2)' }}>{props.raw ? 'Net' : 'Global'} score</h3>
+
+        <div style={{
+            position: 'absolute',
+            top: 6,
+            right: 6,
+            borderRadius: '50%',
+            background: 'rgba(249, 176, 0, 0.46)',
+            width: 32,
+            height: 32,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }}>
+            <i className='fas fa-chart-line' style={{ fontSize: 'initial' }} />
+        </div>
+    </div>
+};

otoroshi/javascript/src/extensions/greenscore/MixBarChart.js → otoroshi/javascript/src/extensions/greenscore/RulesRadarchart.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
-import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts';
+import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Text } from 'recharts';
 import { caclculateRuleGroup } from './util';
 
-export default class MixBarChart extends PureComponent {
+export default class RulesRadarchart extends PureComponent {
 
   calculate = routes => {
     return routes.reduce((acc, route) => {
@@ -20,6 +20,29 @@ export default class MixBarChart extends PureComponent {
     ])
   }
 
+  renderPolarAngleAxis = props => {
+    const newPoint = this.movePointAtAngle([props.x, props.y], props.payload.index * 90, 12);
+    const texts = props.payload.value.split(" ");
+
+    return texts
+      .map((text, i) => <Text
+        key={text}
+        {...props}
+        verticalAnchor="middle"
+        textRendering='start'
+        x={props.payload.index % 2 !== 0 ? newPoint[0] : props.x}
+        y={props.payload.index % 2 === 0 ? newPoint[1] : props.y + i * 20 - texts.length / 2 * 10}
+      >
+        {text}
+      </Text>
+      );
+  }
+
+  movePointAtAngle = (point, angle, distance) => [
+    point[0] + (Math.sin(angle) * distance),
+    point[1] - (Math.cos(angle) * distance)
+  ];
+
   render() {
     const values = this.props.groups.reduce((acc, item) => {
       const values = this.calculate(item.routes);
@@ -41,16 +64,15 @@ export default class MixBarChart extends PureComponent {
       { subject: 'Design', value: values[1].value / this.props.groups.length },
       { subject: 'Usage', value: values[2].value / this.props.groups.length },
       { subject: 'Log retention', value: values[3].value / this.props.groups.length }
-    ]
+    ];
 
-    console.log(data, [
-      { subject: 'Architecture', value: data[0].value / 1500 },
-      { subject: 'Design', value: data[1].value / 2400 },
-      { subject: 'Usage', value: data[2].value / 1500 },
-      { subject: 'Log retention', value: data[3].value / 600 }
-    ])
-
-    return <div style={{ flex: 1, height: "300px", background: 'var(--bg-color_level2)', borderRadius: '.2rem' }}>
+    return <div style={{
+      flex: 1,
+      maxWidth: 420,
+      background: 'var(--bg-color_level2)',
+      borderRadius: '.2rem',
+      position: 'relative'
+    }} className='p-3'>
       <ResponsiveContainer width="100%" height="100%">
         <RadarChart
           outerRadius="80%"
@@ -65,11 +87,26 @@ export default class MixBarChart extends PureComponent {
           fill="var(--color_level2)"
           fontSize={16}>
           <PolarGrid />
-          <PolarAngleAxis dataKey="subject" />
+          <PolarAngleAxis dataKey="subject" tick={props => this.renderPolarAngleAxis(props)} />
           <PolarRadiusAxis angle={90} domain={[0, 1]} fontSize={0} />
           <Radar name="Mike" dataKey="value" stroke="#8884d8" fill="#f9b000" fillOpacity={0.6} />
         </RadarChart>
       </ResponsiveContainer>
+
+      <div style={{
+        position: 'absolute',
+        top: 6,
+        right: 6,
+        borderRadius: '50%',
+        background: 'rgba(249, 176, 0, 0.46)',
+        width: 32,
+        height: 32,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}>
+        <i className='fas fa-chart-area' style={{ fontSize: 'initial' }} />
+      </div>
     </div>
   }
 }