Skip to content
This repository was archived by the owner on Jun 20, 2023. It is now read-only.

Commit 4713092

Browse files
trickyprtrickypr
committed
🚧 Add basic graph
1 parent 4ace522 commit 4713092

11 files changed

+666
-9
lines changed

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,16 @@
3030
"@types/react": "^17.0.1",
3131
"@types/react-dom": "^17.0.0",
3232
"@types/sinon": "9.0.9",
33+
"babel-plugin-react-css-modules": "^5.2.6",
3334
"copy-webpack-plugin": "7.0.0",
35+
"css-loader": "^5.0.2",
3436
"git-hooks-plus": "1.0.1",
3537
"html-webpack-plugin": "4.5.0",
3638
"prettier": "2.2.1",
3739
"rimraf": "3.0.2",
3840
"rust-wasm-loader": "^0.2.0",
3941
"sinon": "9.2.2",
42+
"style-loader": "^2.0.0",
4043
"terser-webpack-plugin": "5.0.3",
4144
"ts-loader": "8.0.12",
4245
"ts-node": "^9.1.1",
@@ -51,6 +54,7 @@
5154
"dependencies": {
5255
"react": "^17.0.1",
5356
"react-dom": "^17.0.1",
57+
"react-donut-chart": "^1.1.8",
5458
"uuid": "^8.3.2"
5559
}
5660
}

‎src/frontend/html/popup.html

+14-1
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,24 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Dot Shield</title>
7+
8+
<style>
9+
* {
10+
margin:0;
11+
}
12+
13+
#root {
14+
width:100%;
15+
height:100%;
16+
}
17+
</style>
718
</head>
819
<body>
920
<!--
1021
This file is for the popup that appears when you press the shield icon in firefox
11-
-->
22+
-->
23+
24+
<div id="root"></div>
1225

1326
<!--
1427
This import is for when this file is copied to the public folder, hence

‎src/frontend/ui/common/ring.module.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.dropdown {
2+
position: relative;
3+
display: block;
4+
}
5+
6+
/* Dropdown Content (Hidden by Default) */
7+
.dropdownContent {
8+
display: none;
9+
position: absolute;
10+
background-color: #f9f9f9;
11+
min-width: 160px;
12+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
13+
z-index: 1;
14+
border-radius: 4px;
15+
left: 50%;
16+
background-color: #333;
17+
color: #fff;
18+
transform: translate(-50%, 0);
19+
padding: 4px 8px;
20+
}
21+
22+
/* Links inside the dropdown */
23+
.dropdownContent a {
24+
color: black;
25+
padding: 12px 16px;
26+
text-decoration: none;
27+
display: block;
28+
}
29+
30+
/* Show the dropdown menu on hover */
31+
.dropdown:hover .dropdownContent {
32+
}
33+
34+
.ring:hover ~ .dropdownContent {
35+
display: block;
36+
}

‎src/frontend/ui/common/ring.tsx

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { useState } from 'react'
2+
import style from './ring.module.css'
3+
4+
const SIZE = 232
5+
const STROKE_WIDTH = 24
6+
const STROKE_ARRAY = Math.round(SIZE * 2.7)
7+
console.log(STROKE_ARRAY)
8+
9+
const ringStyles = (percentage: number, prior: number): string => {
10+
return `
11+
stroke-dasharray: ${STROKE_ARRAY};
12+
stroke-dashoffset: ${Math.round(STROKE_ARRAY * (percentage / 100))};
13+
transform-origin: ${SIZE / 2}px ${SIZE / 2}px;
14+
transform: rotate(${-(360 * (prior / 100) + 90)}deg)
15+
`
16+
}
17+
18+
export const Ring: (props: {
19+
data: { label: string; value: number; color?: string }[]
20+
}) => any = ({ data }) => {
21+
let totalRotation = 0
22+
23+
return (
24+
<div style={{ width: '100%' }}>
25+
<style>
26+
{data.map((ring, i) => {
27+
const elStyle = `
28+
#${style.ring}-${i} {
29+
${ringStyles(ring.value, totalRotation)}
30+
}
31+
`
32+
33+
totalRotation += ring.value
34+
return elStyle
35+
})}
36+
</style>
37+
38+
<div style={{ position: 'relative' }}>
39+
{data.map((ring, i) => {
40+
const [hover, setHover] = useState(false)
41+
42+
return (
43+
<div
44+
style={{ position: 'absolute', pointerEvents: 'none' }}
45+
key={i}
46+
>
47+
<div className={style.dropdown}>
48+
<svg
49+
style={{
50+
height: SIZE,
51+
width: SIZE,
52+
// margin: '0 auto',
53+
display: 'inline',
54+
}}
55+
>
56+
<g>
57+
<circle
58+
className={style.ring}
59+
id={`${style.ring}-${i}`}
60+
style={{ pointerEvents: 'auto' }}
61+
r={SIZE / 2 - STROKE_WIDTH}
62+
cy={SIZE / 2}
63+
cx={SIZE / 2}
64+
strokeWidth={STROKE_WIDTH}
65+
stroke={ring.color || '#69aff4'}
66+
fill="none"
67+
onMouseEnter={() => setHover(true)}
68+
onMouseLeave={() => setHover(false)}
69+
/>
70+
</g>
71+
</svg>
72+
<div
73+
className={style.dropdownContent}
74+
style={{ display: hover ? 'block' : 'none' }}
75+
>
76+
<p>{ring.label}</p>
77+
</div>
78+
</div>
79+
</div>
80+
)
81+
})}
82+
</div>
83+
</div>
84+
)
85+
}

‎src/frontend/ui/popup/app.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component } from 'react'
2+
import DonutChart from 'react-donut-chart'
3+
import { Ring } from '../common/ring'
4+
5+
import styles from './style.module.css'
6+
7+
export class App extends Component {
8+
render() {
9+
return (
10+
<div className={styles.container}>
11+
<h1>Hello</h1>
12+
13+
<style>
14+
{`
15+
.${styles.chart}-innertext {
16+
display: none;
17+
}
18+
`}
19+
</style>
20+
21+
<Ring
22+
data={[
23+
{
24+
label: 'Give you up',
25+
value: 25,
26+
},
27+
{
28+
label: 'Let you down',
29+
value: 75,
30+
color: '#6fdb6f',
31+
},
32+
]}
33+
/>
34+
</div>
35+
)
36+
}
37+
}

‎src/frontend/ui/popup/popup.ts

-1
This file was deleted.

‎src/frontend/ui/popup/popup.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import ReactDOM from 'react-dom'
2+
import { App } from './app'
3+
4+
ReactDOM.render(<App />, document.getElementById('root'))

‎src/frontend/ui/popup/style.module.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
:root {
2+
--bg: #ffffff;
3+
}
4+
5+
/*
6+
@media (prefers-color-scheme: dark) {
7+
:root {
8+
--bg: #000000;
9+
}
10+
}
11+
*/
12+
13+
.container {
14+
background-color: var(--bg);
15+
width: 376px;
16+
}
17+
18+
.chart {
19+
width: 100%;
20+
}
21+
22+
.chart .innertext {
23+
}

‎src/type.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
declare module '*.rs'
2+
declare module '*.css'
3+
declare module '*.module.css'

‎webpack/webpack.common.js

+20-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const htmlFiles = require('../src/frontend/html/pages')
88

99
module.exports = {
1010
entry: {
11-
popup: path.join(__dirname, `${srcDir}/frontend/ui/popup/popup.ts`),
11+
popup: path.join(__dirname, `${srcDir}/frontend/ui/popup/popup.tsx`),
1212
settings: path.join(
1313
__dirname,
1414
`${srcDir}/frontend/ui/settings/settings.tsx`
@@ -26,6 +26,25 @@ module.exports = {
2626
use: 'ts-loader',
2727
exclude: /node_modules/,
2828
},
29+
{
30+
test: /\.css$/,
31+
use: [
32+
'style-loader',
33+
{
34+
loader: 'css-loader',
35+
options: {
36+
import: false,
37+
modules: true,
38+
},
39+
},
40+
],
41+
include: /\.module\.css$/,
42+
},
43+
{
44+
test: /\.css$/,
45+
use: ['style-loader', 'css-loader'],
46+
exclude: /\.module\.css$/,
47+
},
2948
//* File loader for rust code
3049
// This has been disabled for performance and ease of development reasons as
3150
// we don't currently need it

0 commit comments

Comments
 (0)