Migrate to React
This commit is contained in:
Adrian Rumpold
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
12
README.md
Normal file
12
README.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
# React + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import js from "@eslint/js";
|
||||||
|
import reactHooks from "eslint-plugin-react-hooks";
|
||||||
|
import reactRefresh from "eslint-plugin-react-refresh";
|
||||||
|
import globals from "globals";
|
||||||
|
import tseslint from "typescript-eslint";
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ["dist"] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ["**/*.{ts,tsx}"],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
"react-hooks": reactHooks,
|
||||||
|
"react-refresh": reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
"react-refresh/only-export-components": [
|
||||||
|
"warn",
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
341
main.html
341
main.html
@@ -1,341 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Likert Survey Visualization</title>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: white;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-input-section {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding: 20px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 2px dashed #dee2e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-input-section input[type="file"] {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-button {
|
|
||||||
background: #007bff;
|
|
||||||
color: white;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-button:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-container {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.question-group {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.question-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
stroke: #fff;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.axis-label {
|
|
||||||
font-size: 12px;
|
|
||||||
fill: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.axis text {
|
|
||||||
font-size: 11px;
|
|
||||||
fill: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.axis path,
|
|
||||||
.axis line {
|
|
||||||
fill: none;
|
|
||||||
stroke: #ddd;
|
|
||||||
shape-rendering: crispEdges;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid line {
|
|
||||||
stroke: #e0e0e0;
|
|
||||||
stroke-dasharray: 2, 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
position: absolute;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
color: white;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1>Likert Survey Response Visualization</h1>
|
|
||||||
|
|
||||||
<div class="file-input-section">
|
|
||||||
<p>
|
|
||||||
<strong>Upload CSV File:</strong> Expected format:
|
|
||||||
id,question,response
|
|
||||||
</p>
|
|
||||||
<input type="file" id="csvFile" accept=".csv" />
|
|
||||||
<button class="sample-button" onclick="loadSampleData()">
|
|
||||||
Load Sample Data
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chart-container" id="chartContainer"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Color scheme for Likert scale responses
|
|
||||||
const colorScheme = {
|
|
||||||
"Strongly Disagree": "#d32f2f",
|
|
||||||
Disagree: "#f57c00",
|
|
||||||
Neutral: "#fbc02d",
|
|
||||||
Agree: "#689f38",
|
|
||||||
"Strongly Agree": "#388e3c",
|
|
||||||
1: "#d32f2f",
|
|
||||||
2: "#f57c00",
|
|
||||||
3: "#fbc02d",
|
|
||||||
4: "#689f38",
|
|
||||||
5: "#388e3c",
|
|
||||||
};
|
|
||||||
|
|
||||||
// Configuration
|
|
||||||
const config = {
|
|
||||||
dotRadius: 4,
|
|
||||||
dotSpacing: 2,
|
|
||||||
columnsPerGroup: 4,
|
|
||||||
groupSpacing: 60,
|
|
||||||
questionSpacing: 80,
|
|
||||||
margin: { top: 20, right: 30, bottom: 80, left: 120 },
|
|
||||||
};
|
|
||||||
|
|
||||||
// Create tooltip
|
|
||||||
const tooltip = d3
|
|
||||||
.select("body")
|
|
||||||
.append("div")
|
|
||||||
.attr("class", "tooltip")
|
|
||||||
.style("opacity", 0);
|
|
||||||
|
|
||||||
// Sample data generator
|
|
||||||
function loadSampleData() {
|
|
||||||
const questions = [
|
|
||||||
"Service Quality",
|
|
||||||
"Value for Money",
|
|
||||||
"Ease of Use",
|
|
||||||
"Recommendation",
|
|
||||||
];
|
|
||||||
const responses = [
|
|
||||||
"Strongly Disagree",
|
|
||||||
"Disagree",
|
|
||||||
"Neutral",
|
|
||||||
"Agree",
|
|
||||||
"Strongly Agree",
|
|
||||||
];
|
|
||||||
|
|
||||||
let sampleData = [];
|
|
||||||
let id = 1;
|
|
||||||
|
|
||||||
questions.forEach((question) => {
|
|
||||||
// Generate random responses for each question
|
|
||||||
const numResponses = Math.floor(Math.random() * 50) + 30; // 30-80 responses per question
|
|
||||||
for (let i = 0; i < numResponses; i++) {
|
|
||||||
const response =
|
|
||||||
responses[Math.floor(Math.random() * responses.length)];
|
|
||||||
sampleData.push({
|
|
||||||
id: id++,
|
|
||||||
question: question,
|
|
||||||
response: response,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
visualizeData(sampleData);
|
|
||||||
}
|
|
||||||
|
|
||||||
// File input handler
|
|
||||||
document
|
|
||||||
.getElementById("csvFile")
|
|
||||||
.addEventListener("change", function (event) {
|
|
||||||
const file = event.target.files[0];
|
|
||||||
if (file) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = function (e) {
|
|
||||||
const csv = e.target.result;
|
|
||||||
const data = d3.csvParse(csv);
|
|
||||||
visualizeData(data);
|
|
||||||
};
|
|
||||||
reader.readAsText(file);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function visualizeData(data) {
|
|
||||||
// Clear existing chart
|
|
||||||
d3.select("#chartContainer").selectAll("*").remove();
|
|
||||||
|
|
||||||
// Group data by question
|
|
||||||
const questionGroups = d3.group(data, (d) => d.question);
|
|
||||||
|
|
||||||
// Get unique response categories (sorted for consistent ordering)
|
|
||||||
const allResponses = [...new Set(data.map((d) => d.response))];
|
|
||||||
const responseOrder = [
|
|
||||||
"Strongly Disagree",
|
|
||||||
"Disagree",
|
|
||||||
"Neutral",
|
|
||||||
"Agree",
|
|
||||||
"Strongly Agree",
|
|
||||||
"1",
|
|
||||||
"2",
|
|
||||||
"3",
|
|
||||||
"4",
|
|
||||||
"5",
|
|
||||||
];
|
|
||||||
const sortedResponses = allResponses.sort((a, b) => {
|
|
||||||
const aIndex = responseOrder.indexOf(a);
|
|
||||||
const bIndex = responseOrder.indexOf(b);
|
|
||||||
if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
|
|
||||||
if (aIndex !== -1) return -1;
|
|
||||||
if (bIndex !== -1) return 1;
|
|
||||||
return a.localeCompare(b);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Create scales
|
|
||||||
const xScale = d3
|
|
||||||
.scaleBand()
|
|
||||||
.domain(sortedResponses)
|
|
||||||
.range([0, sortedResponses.length * config.groupSpacing])
|
|
||||||
.padding(0.1);
|
|
||||||
|
|
||||||
// Create visualization for each question
|
|
||||||
questionGroups.forEach((questionData, question) => {
|
|
||||||
createQuestionChart(questionData, question, sortedResponses, xScale);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createQuestionChart(data, question, responses, xScale) {
|
|
||||||
const container = d3.select("#chartContainer");
|
|
||||||
|
|
||||||
// Group responses by category
|
|
||||||
const responseGroups = d3.group(data, (d) => d.response);
|
|
||||||
|
|
||||||
// Calculate maximum dots in any group for height calculation
|
|
||||||
const maxCount = d3.max(
|
|
||||||
responseGroups,
|
|
||||||
([key, values]) => values.length
|
|
||||||
);
|
|
||||||
const maxRows = Math.ceil(maxCount / config.columnsPerGroup);
|
|
||||||
const chartHeight =
|
|
||||||
maxRows * (config.dotRadius * 2 + config.dotSpacing) +
|
|
||||||
config.margin.top +
|
|
||||||
config.margin.bottom;
|
|
||||||
|
|
||||||
// Create SVG for this question
|
|
||||||
const svg = container
|
|
||||||
.append("div")
|
|
||||||
.attr("class", "question-group")
|
|
||||||
.append("svg")
|
|
||||||
.attr(
|
|
||||||
"width",
|
|
||||||
xScale.range()[1] + config.margin.left + config.margin.right
|
|
||||||
)
|
|
||||||
.attr("height", chartHeight);
|
|
||||||
|
|
||||||
const g = svg
|
|
||||||
.append("g")
|
|
||||||
.attr(
|
|
||||||
"transform",
|
|
||||||
`translate(${config.margin.left},${config.margin.top})`
|
|
||||||
);
|
|
||||||
|
|
||||||
// Create dots for each response group
|
|
||||||
responses.forEach((response) => {
|
|
||||||
const responseData = responseGroups.get(response) || [];
|
|
||||||
const x = xScale(response);
|
|
||||||
|
|
||||||
responseData.forEach((d, index) => {
|
|
||||||
const row = Math.floor(index / config.columnsPerGroup);
|
|
||||||
const col = index % config.columnsPerGroup;
|
|
||||||
|
|
||||||
const dotX =
|
|
||||||
x +
|
|
||||||
xScale.bandwidth() / 2 +
|
|
||||||
(col - (config.columnsPerGroup - 1) / 2) *
|
|
||||||
(config.dotRadius * 2 + config.dotSpacing);
|
|
||||||
const dotY =
|
|
||||||
chartHeight -
|
|
||||||
config.margin.top -
|
|
||||||
config.margin.bottom -
|
|
||||||
(row + 1) * (config.dotRadius * 2 + config.dotSpacing);
|
|
||||||
|
|
||||||
g.append("circle")
|
|
||||||
.attr("class", "dot")
|
|
||||||
.attr("cx", dotX)
|
|
||||||
.attr("cy", dotY)
|
|
||||||
.attr("r", config.dotRadius)
|
|
||||||
.attr("fill", colorScheme[response] || "#666")
|
|
||||||
.on("mouseover", function (event) {
|
|
||||||
tooltip.transition().duration(200).style("opacity", 0.9);
|
|
||||||
tooltip
|
|
||||||
.html(
|
|
||||||
"Question: " +
|
|
||||||
question +
|
|
||||||
"<br/>Response: " +
|
|
||||||
response +
|
|
||||||
"<br/>ID: " +
|
|
||||||
d.id
|
|
||||||
)
|
|
||||||
.style("left", event.pageX + 10 + "px")
|
|
||||||
.style("top", event.pageY - 28 + "px");
|
|
||||||
})
|
|
||||||
.on("mouseout", function () {
|
|
||||||
tooltip.transition().duration(500).style("opacity", 0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load sample data on page load
|
|
||||||
loadSampleData();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
4285
package-lock.json
generated
Normal file
4285
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"name": "skills-profile-demonstrator",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"d3": "^7.9.0",
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-dom": "^19.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.30.1",
|
||||||
|
"@types/d3": "^7.4.3",
|
||||||
|
"@types/node": "^24.0.12",
|
||||||
|
"@types/react": "^19.1.8",
|
||||||
|
"@types/react-dom": "^19.1.6",
|
||||||
|
"@vitejs/plugin-react": "^4.6.0",
|
||||||
|
"eslint": "^9.30.1",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.20",
|
||||||
|
"globals": "^16.3.0",
|
||||||
|
"ts-node": "^10.9.2",
|
||||||
|
"typescript": "^5.8.3",
|
||||||
|
"typescript-eslint": "^8.36.0",
|
||||||
|
"vite": "^7.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
67
src/App.tsx
Normal file
67
src/App.tsx
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import * as d3 from "d3";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { QuestionGroupChart } from "./components/QuestionGroupChart";
|
||||||
|
import { config } from "./config";
|
||||||
|
import { getSampleData } from "./lib/data";
|
||||||
|
import { ResponseData } from "./lib/parser";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [data, setData] = useState<ResponseData[]>([]);
|
||||||
|
useEffect(() => {
|
||||||
|
setData(getSampleData());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!data.length) return null;
|
||||||
|
|
||||||
|
// Group data by question (outside the component)
|
||||||
|
const questionGroups = Array.from(
|
||||||
|
d3.group(data, (d) => d.question).entries()
|
||||||
|
);
|
||||||
|
|
||||||
|
// Get unique response categories (sorted for consistent ordering)
|
||||||
|
const allResponses = [...new Set(data.map((d) => d.response))];
|
||||||
|
const responseOrder = [
|
||||||
|
"Strongly Disagree",
|
||||||
|
"Disagree",
|
||||||
|
"Neutral",
|
||||||
|
"Agree",
|
||||||
|
"Strongly Agree",
|
||||||
|
"1",
|
||||||
|
"2",
|
||||||
|
"3",
|
||||||
|
"4",
|
||||||
|
"5",
|
||||||
|
];
|
||||||
|
|
||||||
|
const sortedResponses = allResponses.sort((a, b) => {
|
||||||
|
const aIndex = responseOrder.indexOf(a);
|
||||||
|
const bIndex = responseOrder.indexOf(b);
|
||||||
|
if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
|
||||||
|
if (aIndex !== -1) return -1;
|
||||||
|
if (bIndex !== -1) return 1;
|
||||||
|
return a.localeCompare(b);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create scales
|
||||||
|
const xScale = d3
|
||||||
|
.scaleBand()
|
||||||
|
.domain(sortedResponses)
|
||||||
|
.range([0, sortedResponses.length * config.groupSpacing])
|
||||||
|
.padding(0.1);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{questionGroups.map(([question, groupData]) => (
|
||||||
|
<QuestionGroupChart
|
||||||
|
key={question}
|
||||||
|
question={question}
|
||||||
|
groupData={groupData}
|
||||||
|
responses={sortedResponses}
|
||||||
|
xScale={xScale}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
95
src/components/QuestionGroupChart.tsx
Normal file
95
src/components/QuestionGroupChart.tsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import * as d3 from "d3";
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import { colorScheme, config } from "../config";
|
||||||
|
|
||||||
|
interface QuestionGroupChartProps {
|
||||||
|
question: string;
|
||||||
|
groupData: { response: string }[];
|
||||||
|
responses: string[];
|
||||||
|
xScale: d3.ScaleBand<string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function QuestionGroupChart({
|
||||||
|
question,
|
||||||
|
groupData,
|
||||||
|
responses,
|
||||||
|
xScale,
|
||||||
|
}: QuestionGroupChartProps) {
|
||||||
|
const svgRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Clear SVG
|
||||||
|
d3.select(svgRef.current).selectAll("*").remove();
|
||||||
|
|
||||||
|
// Group responses by category (within this group only)
|
||||||
|
const responseGroups = d3.group(groupData, (d) => d.response);
|
||||||
|
const maxCount =
|
||||||
|
d3.max(Array.from(responseGroups.values(), (values) => values.length)) ||
|
||||||
|
0;
|
||||||
|
const maxRows = Math.ceil(maxCount / config.columnsPerGroup);
|
||||||
|
|
||||||
|
const chartHeight =
|
||||||
|
maxRows * (config.dotRadius * 2 + config.dotSpacing) +
|
||||||
|
config.margin.bottom;
|
||||||
|
const chartWidth =
|
||||||
|
xScale.range()[1] + config.margin.left + config.margin.right;
|
||||||
|
|
||||||
|
const svg = d3
|
||||||
|
.select(svgRef.current)
|
||||||
|
.attr("width", chartWidth)
|
||||||
|
.attr("height", chartHeight);
|
||||||
|
const g = svg
|
||||||
|
.append("g")
|
||||||
|
.attr(
|
||||||
|
"transform",
|
||||||
|
`translate(${config.margin.left},${config.margin.top})`
|
||||||
|
);
|
||||||
|
|
||||||
|
// Dots
|
||||||
|
responses.forEach((response) => {
|
||||||
|
const responseData = responseGroups.get(response) || [];
|
||||||
|
const x = xScale(response) || 0;
|
||||||
|
responseData.forEach((_, index) => {
|
||||||
|
const row = Math.floor(index / config.columnsPerGroup);
|
||||||
|
const col = index % config.columnsPerGroup;
|
||||||
|
const dotX =
|
||||||
|
x +
|
||||||
|
xScale.bandwidth() / 2 +
|
||||||
|
(col - (config.columnsPerGroup - 1) / 2) *
|
||||||
|
(config.dotRadius * 2 + config.dotSpacing);
|
||||||
|
const dotY =
|
||||||
|
chartHeight -
|
||||||
|
config.margin.top -
|
||||||
|
config.margin.bottom -
|
||||||
|
(row + 1) * (config.dotRadius * 2 + config.dotSpacing);
|
||||||
|
|
||||||
|
g.append("circle")
|
||||||
|
.attr("class", "dot")
|
||||||
|
.attr("cx", dotX)
|
||||||
|
.attr("cy", dotY)
|
||||||
|
.attr("r", config.dotRadius)
|
||||||
|
.attr("fill", colorScheme[response] || "#666");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, [groupData, responses, xScale, question]);
|
||||||
|
|
||||||
|
/*
|
||||||
|
// Calculate height for container
|
||||||
|
const responseGroups = d3.group(groupData, (d) => d.response);
|
||||||
|
const maxCount =
|
||||||
|
d3.max(Array.from(responseGroups.values(), (values) => values.length)) || 0;
|
||||||
|
const maxRows = Math.ceil(maxCount / config.columnsPerGroup);
|
||||||
|
const chartHeight =
|
||||||
|
maxRows * (config.dotRadius * 2 + config.dotSpacing) +
|
||||||
|
config.margin.top +
|
||||||
|
config.margin.bottom;
|
||||||
|
*/
|
||||||
|
return (
|
||||||
|
<div className="question-group">
|
||||||
|
<div className="question-title">{question}</div>
|
||||||
|
<svg ref={svgRef}></svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default QuestionGroupChart;
|
||||||
24
src/config.ts
Normal file
24
src/config.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
export const config = {
|
||||||
|
dotRadius: 5,
|
||||||
|
dotSpacing: 2,
|
||||||
|
columnsPerGroup: 3,
|
||||||
|
groupSpacing: 40,
|
||||||
|
margin: { top: 20, right: 30, bottom: 80, left: 120 },
|
||||||
|
};
|
||||||
|
|
||||||
|
// Color scheme for Likert scale responses
|
||||||
|
type ColorScheme = {
|
||||||
|
[key: string | number]: string;
|
||||||
|
};
|
||||||
|
export const colorScheme: ColorScheme = {
|
||||||
|
"Strongly Disagree": "#d32f2f",
|
||||||
|
Disagree: "#f57c00",
|
||||||
|
Neutral: "#fbc02d",
|
||||||
|
Agree: "#689f38",
|
||||||
|
"Strongly Agree": "#388e3c",
|
||||||
|
1: "#d32f2f",
|
||||||
|
2: "#f57c00",
|
||||||
|
3: "#fbc02d",
|
||||||
|
4: "#689f38",
|
||||||
|
5: "#388e3c",
|
||||||
|
};
|
||||||
98
src/index.css
Normal file
98
src/index.css
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
:root {
|
||||||
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: only light;
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-group {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
stroke: #fff;
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis-label {
|
||||||
|
font-size: 12px;
|
||||||
|
fill: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis text {
|
||||||
|
font-size: 11px;
|
||||||
|
fill: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis path,
|
||||||
|
.axis line {
|
||||||
|
fill: none;
|
||||||
|
stroke: #ddd;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid line {
|
||||||
|
stroke: #e0e0e0;
|
||||||
|
stroke-dasharray: 2, 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
31
src/lib/data.ts
Normal file
31
src/lib/data.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import { ResponseData } from "./parser";
|
||||||
|
|
||||||
|
export function getSampleData(): ResponseData[] {
|
||||||
|
const questions = [
|
||||||
|
"Service Quality",
|
||||||
|
"Value for Money",
|
||||||
|
"Ease of Use",
|
||||||
|
"Recommendation",
|
||||||
|
];
|
||||||
|
const responses = [
|
||||||
|
"Strongly Disagree",
|
||||||
|
"Disagree",
|
||||||
|
"Neutral",
|
||||||
|
"Agree",
|
||||||
|
"Strongly Agree",
|
||||||
|
];
|
||||||
|
const sampleData: ResponseData[] = [];
|
||||||
|
let id = 1;
|
||||||
|
questions.forEach((question) => {
|
||||||
|
const numResponses = Math.floor(Math.random() * 50) + 30;
|
||||||
|
for (let i = 0; i < numResponses; i++) {
|
||||||
|
const response = responses[Math.floor(Math.random() * responses.length)];
|
||||||
|
sampleData.push({
|
||||||
|
id: id++,
|
||||||
|
question: question,
|
||||||
|
response: response,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return sampleData;
|
||||||
|
}
|
||||||
11
src/lib/parser.ts
Normal file
11
src/lib/parser.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import * as d3 from "d3";
|
||||||
|
|
||||||
|
export interface ResponseData {
|
||||||
|
id: number;
|
||||||
|
question: string;
|
||||||
|
response: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function parseCSV(csv: string): d3.DSVRowArray<string> {
|
||||||
|
return d3.csvParse(csv);
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import App from "./App";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
createRoot(document.getElementById("root")!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
26
tsconfig.app.json
Normal file
26
tsconfig.app.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
9
tsconfig.node.json
Normal file
9
tsconfig.node.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "nodenext",
|
||||||
|
"moduleResolution": "nodenext",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
1
tsconfig.node.tsbuildinfo
Normal file
1
tsconfig.node.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
2
vite.config.d.ts
vendored
Normal file
2
vite.config.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
declare const _default: import("vite").UserConfig;
|
||||||
|
export default _default;
|
||||||
6
vite.config.js
Normal file
6
vite.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
});
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user