From 7644bd9046ffa6902f25036e6d2d4fba4ea498eb Mon Sep 17 00:00:00 2001 From: prisar Date: Fri, 7 Jul 2023 04:51:55 +0530 Subject: [PATCH] cards --- .firebaserc | 5 +++ .gitignore | 2 ++ firebase.json | 16 +++++++++ src/App.css | 79 +++++++++++++++++++++++++++-------------- src/App.js | 44 ++++++++++++++++++----- src/RegistraionChart.js | 12 +++++-- src/TestResultChart.js | 7 ++++ src/components/Card.js | 13 +++++++ 8 files changed, 141 insertions(+), 37 deletions(-) create mode 100644 .firebaserc create mode 100644 firebase.json create mode 100644 src/components/Card.js diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000..0dccf08 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "hpos-af3cc" + } +} diff --git a/.gitignore b/.gitignore index 4d29575..1cc4f16 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.firebase \ No newline at end of file diff --git a/firebase.json b/firebase.json new file mode 100644 index 0000000..340ed5b --- /dev/null +++ b/firebase.json @@ -0,0 +1,16 @@ +{ + "hosting": { + "public": "build", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} diff --git a/src/App.css b/src/App.css index ca195a1..25ea6f7 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,8 @@ body { - /* background-color: #282c34; - color: aliceblue; */ + background-color: rgb(247,245,249); + color: aliceblue; } + .App { text-align: center; } @@ -28,20 +29,6 @@ body { color: white; } -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - /* remove scroll bar */ ::-webkit-scrollbar { display: none; @@ -51,20 +38,58 @@ body { font-weight: 900; } -.card { - /* height: 300px; - width: 400px; */ - border: 1px solid; - padding: 10px; - /* box-shadow: 5px 10px 8px 10px #888888; */ - /* justify-content: center; +.numeric-card { + height: 200px; + width: 300px; + /* border: 1px solid; */ + padding: 20px; + /* background-color: #fb9261; */ + box-shadow: 5px 10px 8px 10px #888888; + border-radius: 15px; + margin: 20px; + justify-content: center; display: flex; - align-items: center; */ + flex-direction: column; + align-items: center; } -div.chart{ font-family:sans-serif; font-size:0.7em; +.card-title { + color: black; + font-size: 1em; + font-weight: 600; + font-family: sans-serif; } + +.card-data { + color: black; + font-size: 4em; + font-family: sans-serif; +} + +.cards-container { + align-items: center; + display: flex; + flex-direction: column; +} + +div.chart { + font-family: sans-serif; + font-size: 0.7em; +} + +.cards-row { + margin: 50px; + display: flex; + flex-direction: row; +} + div.bar { -background-color:DarkRed; color:white; -height:3em; line-height:3em; padding-right:1em; margin-bottom:2px; text-align:right; + background-color: DarkRed; + color: white; + height: 3em; + line-height: 3em; + padding-right: 1em; + margin-bottom: 2px; + text-align: right; } + diff --git a/src/App.js b/src/App.js index 6cb8767..5d7507b 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import RegistraionChart from './RegistraionChart'; import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; +import Card from './components/Card'; const firebaseConfig = { apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8", @@ -34,17 +35,21 @@ function App() { if (!mtests.length) { console.log('mtests', mtests); const tests = getTests(); - // setMales(tests.length); + setMales(tests.length); } }, [mtests]); async function getTests() { - const testDataCol = collection(db, 'testData'); - const testDataSnapshot = await getDocs(testDataCol); - const testDataList = testDataSnapshot.docs.map(doc => doc.data()); - console.log(testDataList); - setMtests(testDataList); - return testDataList; + try { + const testDataCol = collection(db, 'testData'); + const testDataSnapshot = await getDocs(testDataCol); + const testDataList = testDataSnapshot.docs.map(doc => doc.data()); + console.log(testDataList); + setMtests(testDataList); + return testDataList; + } catch (err) { + // log error + } } return ( @@ -63,6 +68,16 @@ function App() { */} + {/*
+
Total People Screened for the day
+
+ {mtests.length && } +
+
+
Registrations
@@ -93,8 +108,21 @@ function App() { width={700} height={300} />}
-
+ */} +
+
+ + + +
+ +
+ + + +
+
{/* {JSON.stringify( mtests.group(({ gender }) => { diff --git a/src/RegistraionChart.js b/src/RegistraionChart.js index 31bbdbe..00c76fb 100644 --- a/src/RegistraionChart.js +++ b/src/RegistraionChart.js @@ -37,7 +37,15 @@ class RegistraionChart extends Component { const data = [ { - "type": "Registration", + "gender": "Male", + "count": 50, + }, + { + "gender": "Female", + "count": 70, + }, + { + "gender": "Not Specified", "count": 60, } ]; @@ -51,7 +59,7 @@ class RegistraionChart extends Component { .enter() .append("div").attr("class", "line"); d3.selectAll("div.line").append("div") - .attr("class", "label").text(function (d) { return d.type }); + .attr("class", "label").text(function (d) { return d.gender }); d3.selectAll("div.line").append("div") .attr("class", "bar") .style("width", function (d) { return d.count + "px" }).text(function (d) { return Math.round(d.count) }); diff --git a/src/TestResultChart.js b/src/TestResultChart.js index cc25f64..7da3983 100644 --- a/src/TestResultChart.js +++ b/src/TestResultChart.js @@ -10,6 +10,12 @@ class TestResultChart extends Component { drawChart() { // const data = this.props.data; + // const groups = data.group(({result}) => result); + // // console.log(); + // for (const [key, value] of Object.entries(groups)) { + // console.log(`${key}: ${value}`); + // } + // groups.entries(x => console.log(x)); const data = [ @@ -34,6 +40,7 @@ class TestResultChart extends Component { "count": 2, }, ]; + // d3.select("#gender").append("div") // .attr("class", "chart").selectAll(".bar").data(data).enter() // .append("div") diff --git a/src/components/Card.js b/src/components/Card.js new file mode 100644 index 0000000..afe7adf --- /dev/null +++ b/src/components/Card.js @@ -0,0 +1,13 @@ +const Card = ({title, counter, color, backgroundColor}) => { + return ( +
+
+ {title} +
+
+ {counter} +
+
+ ); +} +export default Card; \ No newline at end of file