From ec4151992f3702ba564f40eadd7920b1b928e3a0 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Thu, 9 Jan 2025 18:10:25 +0200 Subject: [PATCH] localize charts into ukrainian --- .../frontend/src/components/areaChart-mini.js | 19 +- .../frontend/src/components/barChart-mini.js | 4 +- .../src/components/bubbleChart-mini.js | 10 +- .../src/components/choropleth-mini.js | 165 +----------------- .../src/components/data/AreaChart-2.csv | 48 ++--- .../frontend/src/components/data/BarGraph.csv | 28 +-- .../src/components/data/BubbleChart.csv | 22 +-- .../src/components/data/LineChart.csv | 24 +-- .../frontend/src/components/data/PieChart.csv | 2 +- .../src/components/data/StackedBarGraph.csv | 20 +-- .../frontend/src/components/data/Treemap.json | 10 +- .../frontend/src/components/histogram-mini.js | 6 +- .../frontend/src/components/linechart-mini.js | 20 ++- .../frontend/src/components/pieChart-mini.js | 4 +- .../src/components/scatterplot-mini.js | 6 +- .../src/components/stacked100bar-mini.js | 12 +- .../src/components/stackedArea-mini.js | 12 +- .../src/components/stackedbar-mini.js | 16 +- .../frontend/src/components/treeMap-mini.js | 2 +- .../frontend/src/pages/visualization_quiz.js | 2 +- 20 files changed, 146 insertions(+), 286 deletions(-) diff --git a/ReactTool/frontend/src/components/areaChart-mini.js b/ReactTool/frontend/src/components/areaChart-mini.js index e637892..bc88d84 100644 --- a/ReactTool/frontend/src/components/areaChart-mini.js +++ b/ReactTool/frontend/src/components/areaChart-mini.js @@ -6,7 +6,18 @@ import '../App.css'; import data from './data/AreaChart-2.csv'; import img10 from '../components/data/Mini-VLAT/AreaChart.png' +const ukLocale = { + "dateTime": "%A, %e %B %Y р. %X", + "date": "%d.%m.%Y", + "time": "%H:%M:%S", + "periods": ["AM", "PM"], + "days": ["неділя", "понеділок", "вівторок", "середа", "четвер", "п'ятниця", "субота"], + "shortDays": ["нд", "пн", "вт", "ср", "чт", "пт", "сб"], + "months": ["січень", "лютий", "березень", "квітень", "травень", "червень", "липень", "серпень", "вересень", "жовтень", "листопад", "грудень"], + "shortMonths": ["січ", "лют", "бер", "кві", "тра", "чер", "лип", "сер", "вер", "жов", "лис", "гру"] +}; +const formatUk = d3.timeFormatLocale(ukLocale).format("%b %Y"); class AreaChartMini extends Component { @@ -43,7 +54,7 @@ class AreaChartMini extends Component { .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") - svg.append("text").attr("class", 'bubbleTitle').text("Average Coffee Bean Price from 2013 to 2014").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height) + svg.append("text").attr("class", 'bubbleTitle').text("Середня ціна кавових бобів з 2013 по 2014").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height) var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img10).attr('height', 1.1 * height) @@ -73,7 +84,7 @@ class AreaChartMini extends Component { svg.append("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${height})`) - .call(d3.axisBottom(xScale)) + .call(d3.axisBottom(xScale).tickFormat(formatUk)) var yScale = d3.scaleLinear() .domain([0.5, 0.9]) @@ -120,7 +131,7 @@ class AreaChartMini extends Component { .attr("x", 0 - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Coffee Price ($/lb)") + .text("Ціна ($/фунт)") .style("font-weight", "bold") function make_x_gridlines() { @@ -153,7 +164,7 @@ class AreaChartMini extends Component { .attr("class", "title") .attr("x", width / 3) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("Robusta Coffee Price") + .text("Ціна кави Робуста") .attr("fill", "black") .style("font-weight", "bold") diff --git a/ReactTool/frontend/src/components/barChart-mini.js b/ReactTool/frontend/src/components/barChart-mini.js index fe03ad0..86f4f66 100644 --- a/ReactTool/frontend/src/components/barChart-mini.js +++ b/ReactTool/frontend/src/components/barChart-mini.js @@ -131,14 +131,14 @@ class BarChartMini extends Component { .attr("x", 0 - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Internet Speed (Mbps)") + .text("Швидкість інтернету (Mbps)") .style("font-weight", "bold") svg .append("text") .attr("x", width / 4) .attr("y", -3 * length / margin.top) // +20 to adjust position (lower) - .text("Global Internet Speed (Mbps)") + .text("Швидкість інтернету у світі (Mbps)") .attr("class", "title") .attr("fill", "black") .style("font-weight", "bold") diff --git a/ReactTool/frontend/src/components/bubbleChart-mini.js b/ReactTool/frontend/src/components/bubbleChart-mini.js index 74183e9..05284ce 100644 --- a/ReactTool/frontend/src/components/bubbleChart-mini.js +++ b/ReactTool/frontend/src/components/bubbleChart-mini.js @@ -191,7 +191,7 @@ class BubbleChartMini extends Component { } }) .style("font-weight", "bold") - .text("Ridership") + .text("Пасажиропотік") svg.append("text") .attr("class", "legend-title") @@ -212,7 +212,7 @@ class BubbleChartMini extends Component { } }) .style("font-weight", "bold") - .text("(bn per year)") + .text("(млрд/рік)") svg .selectAll("legend") @@ -339,7 +339,7 @@ class BubbleChartMini extends Component { .attr("x", 0 - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Total System Length (Km)") + .text("Загальна протяжність системи (км)") .style("font-weight", "bold") svg.append("text") @@ -354,14 +354,14 @@ class BubbleChartMini extends Component { }) .style("text-anchor", "middle") .style("font-weight", "bold") - .text("Number of Stations") + .text("Кількість станцій") svg .append("text") .attr("class", "title") .attr("x", width / 3) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("Metro Systems of the World") + .text("Системи метро у світі") .attr("fill", "black") .style("font-weight", "bold") }) diff --git a/ReactTool/frontend/src/components/choropleth-mini.js b/ReactTool/frontend/src/components/choropleth-mini.js index 4b5ce74..7b79171 100644 --- a/ReactTool/frontend/src/components/choropleth-mini.js +++ b/ReactTool/frontend/src/components/choropleth-mini.js @@ -46,173 +46,10 @@ class ChoroplethMini extends Component { .attr("height", height + margin.top + margin.bottom) .append("g") - svg.append("text").attr("class", 'bubbleTitle').text("Unemployment Rates for States in 2020").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 0.9 * margin.top).style('font-size', 0.04 * height) + svg.append("text").attr("class", 'bubbleTitle').text("Рівень безробіття в штатах США у 2020 році").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 0.9 * margin.top).style('font-size', 0.04 * height) var image = svg.append('image').attr('width', 1.4 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img8).attr('height', 1.1 * height) - // else { - // const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 }, - // width = length - margin.left - margin.right, - // height = length - margin.top - margin.bottom; - - // // append the svg object to the body of the page - // //d3.select("#graph_box").selectAll("svg").remove(); - // d3.select("#graph_box").select("svg").remove(); - // const svg = d3.select("#graph_box") - // .append("svg") - // .attr("width", width + margin.left + margin.right) - // .attr("height", height + margin.top + margin.bottom) - // .append("g") - // .attr("transform", `translate(${margin.left},${margin.top})`); - - // // svg.append("text").attr("class", 'bubbleTitle').text("Unemployment Rates for States in 2015").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height) - - // // var image = svg.append('image').attr('width', 1.4 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img8).attr('height', 1.1 * height) - - // var projection = d3.geoAlbersUsa() - // .translate([width / 2, height / 2]) - // .scale(Math.min(e.clientHeight, e.clientWidth)); - - // var path = d3.geoPath() - // .projection(projection) - - // var lowColor = '#f7fbff' - // var highColor = '#084594' - - // d3.csv(data).then(function (data) { - // var names = {}; - // data.forEach(function (d) { - // d.state = d.state; - // d.value = parseFloat(d.value); - // names[d.id] = d.code; - // }) - // var dataArr = []; - // for (var d = 0; d < data.length; d++) { - // dataArr.push(parseFloat(data[d].value)) - // } - // var minVal = d3.min(dataArr); - // var maxVal = d3.max(dataArr); - // var ramp = d3.scaleLinear().domain([minVal, maxVal]).range([lowColor, highColor]) - - // for (var i = 0; i < data.length; i++) { - // var dataState = data[i].state; - // var dataVal = data[i].value; - // var usa = topojson.feature(data_usa, data_usa.objects.states).features; - // for (var j = 0; j < usa.length; j++) { - // var jsonState = usa[j].properties.name; - // if (dataState == jsonState) { - // usa[j].properties.value = dataVal; - // break; - // } - // } - // } - // // Render the U.S. by using the path generator - // svg.selectAll("path") - // .data(usa) - // .enter().append("path") - // .attr("d", path) - // .style("stroke", "#ffff") - // .style("stroke-width", "1") - // .style("fill", function (d) { - // return ramp(d.properties.value) - // }); - - // svg.selectAll("text").data(usa).enter().append("text") - // .text(function (d) { - // return names[d.id]; - // }) - // .attr("x", function (d) { - // return path.centroid(d)[0]; - // }) - // .attr("y", function (d) { - // return path.centroid(d)[1]; - // }) - // .attr("class", "state-abbr") - // .attr("text-anchor", "middle") - // .attr("fill", "black") - // .style("font-weight", "bold") - - // //var w = e.clientWidth/4, h = e.clientHeight/6; - // //d3.select("body").select("svg").remove(); - // //d3.selectAll("svg").select(".legend").remove(); - - // var legend = svg.append("defs") - // .append("svg:linearGradient") - // .attr("id", "gradient") - // .attr("x1", "0%") - // .attr("y1", "100%") - // .attr("x2", "100%") - // .attr("y2", "100%") - // .attr("spreadMethod", "pad"); - - // legend.append("stop") - // .attr("offset", "0%") - // .attr("stop-color", highColor) - // .attr("stop-opacity", 1); - - // legend.append("stop") - // .attr("offset", "100%") - // .attr("stop-color", lowColor) - // .attr("stop-opacity", 1); - - // if (width < 350) { - // svg.append("rect") - // .attr("width", length / 4) - // .attr("height", length / 5.5 - margin.top) - // .style("fill", "url(#gradient)") - // .attr("transform", "translate(0," + (length / 5.4 - margin.left / 0.8) + ")"); - - // svg.append("text").attr("x", 0).attr("y", length / 8.5 - 0.4 * margin.top).text("12%").style("font-weight", "bold").attr("class", "legend-value") - // svg.append("text").attr("x", length / 20).attr("y", length / 8.5 - 0.4 * margin.top).text("10%").style("font-weight", "bold").attr("class", "legend-value") - // svg.append("text").attr("x", length / 10).attr("y", length / 8.5 - 0.4 * margin.top).text("8%").style("font-weight", "bold").attr("class", "legend-value") - // svg.append("text").attr("x", length / 7).attr("y", length / 8.5 - 0.4 * margin.top).text("6%").style("font-weight", "bold").attr("class", "legend-value") - // svg.append("text").attr("x", length / 5).attr("y", length / 8.5 - 0.4 * margin.top).text("4%").style("font-weight", "bold").attr("class", "legend-value") - // } - // else { - // svg.append("rect") - // .attr("width", length / 4) - // .attr("height", length / 5.5 - margin.top) - // .style("fill", "url(#gradient)") - // .attr("transform", "translate(0," + (length / 5.4 - margin.left / 1) + ")"); - - // svg.append("text").attr("x", 0).attr("y", length / 6.5 - 0.4 * margin.top).text("12%").style("font-weight", "bold").attr("class", "legend-value") - // svg.append("text").attr("x", length / 20).attr("y", length / 6.5 - 0.4 * margin.top).text("10%").style("font-weight", "bold").attr("class", "legend-value") - // svg.append("text").attr("x", length / 10).attr("y", length / 6.5 - 0.4 * margin.top).text("8%").style("font-weight", "bold").attr("class", "legend-value") - // svg.append("text").attr("x", length / 7).attr("y", length / 6.5 - 0.4 * margin.top).text("6%").style("font-weight", "bold").attr("class", "legend-value") - // svg.append("text").attr("x", length / 5).attr("y", length / 6.5 - 0.4 * margin.top).text("4%").style("font-weight", "bold").attr("class", "legend-value") - // } - - - - - - // /* - // var y = d3.scaleLinear() - // .range([length/4 - length/3.3, length/4.4 - length/(margin.left/4.0)]) - // //.domain([maxVal, minVal]); - // //ar formatPercent = d3.format("%"); - // var yAxis = d3.axisBottom(y).tickValues(["12%", "11%", "10%", "9%"]); - // svg.append("g") - // //.attr("class", "axis") - // .attr("transform", "translate(" + (length/5.45-margin.left/1.1) + "," + margin.right/0.75 + ")") - // .call(yAxis) - // .style("font-weight", "bold") - // .style("font-size", 1.3*(length/margin.top)); */ - - // svg - // .append("text") - // .attr("x", width / 5.5) - // .attr("y", -length / margin.top) // +20 to adjust position (lower) - // .text("Unemployment Rate for States in 2020 ") - // .attr("class", "title") - // .attr("fill", "black") - // .style("font-weight", "bold") - - // }); - - // } - - } diff --git a/ReactTool/frontend/src/components/data/AreaChart-2.csv b/ReactTool/frontend/src/components/data/AreaChart-2.csv index fcfb7a9..688d19a 100644 --- a/ReactTool/frontend/src/components/data/AreaChart-2.csv +++ b/ReactTool/frontend/src/components/data/AreaChart-2.csv @@ -1,25 +1,25 @@ date,value -Jan-2018,88.65 -Feb-2018,89.24 -Mar-2018,88.18 -Apr-2018,88.31 -May-2018,88.74 -Jun-2018,86.07 -Jul-2018,84.42 -Aug-2018,80.74 -Sep-2018,76.70 -Oct-2018,85.32 -Nov-2018,83.52 -Dec-2018,77.57 -Jan-2019,78.24 -Feb-2019,78.65 -Mar-2019,76.96 -Apr-2019,73.28 -May-2019,71.12 -Jun-2019,74.02 -Jul-2019,73.93 -Aug-2019,70.78 -Sep-2019,70.64 -Oct-2019,68.63 -Nov-2019,73.28 -Dec-2019,73.22 \ No newline at end of file +Січ-2018,88.65 +Лют-2018,89.24 +Бер-2018,88.18 +Кві-2018,88.31 +Тра-2018,88.74 +Чер-2018,86.07 +Лип-2018,84.42 +Сер-2018,80.74 +Вер-2018,76.70 +Жов-2018,85.32 +Лис-2018,83.52 +Гру-2018,77.57 +Січ-2019,78.24 +Лют-2019,78.65 +Бер-2019,76.96 +Кві-2019,73.28 +Тра-2019,71.12 +Чер-2019,74.02 +Лип-2019,73.93 +Сер-2019,70.78 +Вер-2019,70.64 +Жов-2019,68.63 +Лис-2019,73.28 +Гру-2019,73.22 \ No newline at end of file diff --git a/ReactTool/frontend/src/components/data/BarGraph.csv b/ReactTool/frontend/src/components/data/BarGraph.csv index 20bf0a3..6827531 100644 --- a/ReactTool/frontend/src/components/data/BarGraph.csv +++ b/ReactTool/frontend/src/components/data/BarGraph.csv @@ -1,15 +1,15 @@ Country,Speed -Australia,79.24 -China,78.61 -Hong Kong,43.88 -India,13.45 -Indonesia,16.16 -Japan,40.51 -Malaysia,23.74 -New Zealand,92.05 -Singapore,68.32 -South Korea,98.93 -Sri Lanka,12.60 -Taiwan,51.67 -Thailand,31.38 -Vietnam,35.33 \ No newline at end of file +Австралія,79.24 +Китай,78.61 +Гонконг,43.88 +Індія,13.45 +Індонезія,16.16 +Японія,40.51 +Малайзія,23.74 +Нова Зеландія,92.05 +Сінгапур,68.32 +Південна Корея,98.93 +Шрі-Ланка,12.60 +Тайвань,51.67 +Тайланд,31.38 +Вʼєтнам,35.33 \ No newline at end of file diff --git a/ReactTool/frontend/src/components/data/BubbleChart.csv b/ReactTool/frontend/src/components/data/BubbleChart.csv index 0914638..8bfe02e 100644 --- a/ReactTool/frontend/src/components/data/BubbleChart.csv +++ b/ReactTool/frontend/src/components/data/BubbleChart.csv @@ -1,12 +1,12 @@ City,Length,NumberofStations,Ridership -Delhi,230,348.12,1.7 -Guangzhow,247,531.1,2.4 -Tokyo,249,316.3,3.6 -Mexico City,163,200.9,0.93 -Moscow,198,412.1,1.6 -London,317,439.2,0.335 -Seoul,436,547.9,2.7 -Paris,304,219.9,2.3 -Beijing,342,727,0.75 -Shanghai,369,743,2.8 -N.Y.C.,458,443.7,0.67 \ No newline at end of file +Делі,230,348.12,1.7 +Гуанчжоу,247,531.1,2.4 +Токіо,249,316.3,3.6 +Мехіко,163,200.9,0.93 +Москва,198,412.1,1.6 +Лондон,317,439.2,0.335 +Сеул,436,547.9,2.7 +Париж,304,219.9,2.3 +Пекін,342,727,0.75 +Шанхай,369,743,2.8 +Нью-Йорк.,458,443.7,0.67 \ No newline at end of file diff --git a/ReactTool/frontend/src/components/data/LineChart.csv b/ReactTool/frontend/src/components/data/LineChart.csv index 8d52ac4..b2402d2 100644 --- a/ReactTool/frontend/src/components/data/LineChart.csv +++ b/ReactTool/frontend/src/components/data/LineChart.csv @@ -1,13 +1,13 @@ Month,Price -Jan-2020,57.52 -Feb-2020,50.54 -Mar-2020,29.21 -Apr-2020,16.55 -May-2020,28.56 -Jun-2020,38.31 -Jul-2020,40.71 -Aug-2020,42.34 -Sep-2020,39.63 -Oct-2020,39.4 -Nov-2020,40.94 -Dec-2020,47.02 \ No newline at end of file +Січ-2020,57.52 +Лют-2020,50.54 +Бер-2020,29.21 +Кві-2020,16.55 +Тра-2020,28.56 +Чер-2020,38.31 +Лип-2020,40.71 +Сер-2020,42.34 +Вер-2020,39.63 +Жов-2020,39.4 +Лис-2020,40.94 +Гру-2020,47.02 \ No newline at end of file diff --git a/ReactTool/frontend/src/components/data/PieChart.csv b/ReactTool/frontend/src/components/data/PieChart.csv index 9334920..564825a 100644 --- a/ReactTool/frontend/src/components/data/PieChart.csv +++ b/ReactTool/frontend/src/components/data/PieChart.csv @@ -4,4 +4,4 @@ Xiaomi,16 Apple,15 Oppo,10 Vivo,10 -Others,24 \ No newline at end of file +Інші,24 \ No newline at end of file diff --git a/ReactTool/frontend/src/components/data/StackedBarGraph.csv b/ReactTool/frontend/src/components/data/StackedBarGraph.csv index 0a9b210..39c864e 100644 --- a/ReactTool/frontend/src/components/data/StackedBarGraph.csv +++ b/ReactTool/frontend/src/components/data/StackedBarGraph.csv @@ -1,11 +1,11 @@ City,Sandwich,Water,Peanut,Soda,Vodka -Helsinki,38.2,6.4,12.1,6.4,5.5 -Oslo,29.4,7.4,15.8,7.1,5.1 -Seoul,27.4,7.4,6.1,7.9,9.9 -Zurich,31.3,5.9,10.8,5.6,4.3 -Stockholm,28.4,4.1,11.3,4.9,5 -Paris,23.6,6.8,12.6,6.8,7.0 -N.Y.C.,24.2,3.9,16.8,3.9,7.1 -Singapore,19.4,5.2,14.8,6.6,6.2 -Toronto,20.8,5.4,18.2,3.4,8.0 -Copenhagen,24.3,2.8,10.8,5.0,3.7 \ No newline at end of file +Хельсінкі,38.2,6.4,12.1,6.4,5.5 +Осло,29.4,7.4,15.8,7.1,5.1 +Сеул,27.4,7.4,6.1,7.9,9.9 +Цюріх,31.3,5.9,10.8,5.6,4.3 +Стокгольм,28.4,4.1,11.3,4.9,5 +Париж,23.6,6.8,12.6,6.8,7.0 +Нью-Йорк.,24.2,3.9,16.8,3.9,7.1 +Сінгапур,19.4,5.2,14.8,6.6,6.2 +Торонто,20.8,5.4,18.2,3.4,8.0 +Копенгаген,24.3,2.8,10.8,5.0,3.7 \ No newline at end of file diff --git a/ReactTool/frontend/src/components/data/Treemap.json b/ReactTool/frontend/src/components/data/Treemap.json index 54ebadb..8a77110 100644 --- a/ReactTool/frontend/src/components/data/Treemap.json +++ b/ReactTool/frontend/src/components/data/Treemap.json @@ -1,7 +1,7 @@ { "children": [ { - "name": "Search/Portal", + "name": "Пошук/Портал", "children": [ { "name": "Google", @@ -31,7 +31,7 @@ "colname": "level2" }, { - "name": "Social Network", + "name": "Соцмережа", "children": [ { "name": "Facebook", @@ -61,7 +61,7 @@ "colname": "level2" }, { - "name": "Software", + "name": "Програмне забезпечення", "children": [ { "name": "Mozilla", @@ -97,7 +97,7 @@ "colname": "level2" }, { - "name": "Retail", + "name": "Онлайн-магазини", "children": [ { "name": "eBay", @@ -133,7 +133,7 @@ "colname": "level2" }, { - "name": "Computer", + "name": "Копмʼютери", "children": [ { "name": "Apple", diff --git a/ReactTool/frontend/src/components/histogram-mini.js b/ReactTool/frontend/src/components/histogram-mini.js index 3703c6a..611cc94 100644 --- a/ReactTool/frontend/src/components/histogram-mini.js +++ b/ReactTool/frontend/src/components/histogram-mini.js @@ -146,7 +146,7 @@ class HistogramMini extends Component { .attr("x", - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Number of Customers") + .text("Кількість користувачів") .style("font-weight", "bold") svg.append("text") @@ -164,14 +164,14 @@ class HistogramMini extends Component { }) .style("text-anchor", "middle") .style("font-weight", "bold") - .text("Distance (in Km)") + .text("Відстань (км)") svg .append("text") .attr("class", "title") .attr("x", width / 3) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("Trip Distance and Customers") + .text("Відстань та користувачі") .attr("fill", "black") .style("font-weight", "bold") }) diff --git a/ReactTool/frontend/src/components/linechart-mini.js b/ReactTool/frontend/src/components/linechart-mini.js index a0848d2..84e56a7 100644 --- a/ReactTool/frontend/src/components/linechart-mini.js +++ b/ReactTool/frontend/src/components/linechart-mini.js @@ -5,6 +5,18 @@ import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, I import '../App.css'; import img12 from '../components/data/Mini-VLAT/LineChart.png'; +const ukLocale = { + "dateTime": "%A, %e %B %Y р. %X", + "date": "%d.%m.%Y", + "time": "%H:%M:%S", + "periods": ["AM", "PM"], + "days": ["неділя", "понеділок", "вівторок", "середа", "четвер", "п'ятниця", "субота"], + "shortDays": ["нд", "пн", "вт", "ср", "чт", "пт", "сб"], + "months": ["січень", "лютий", "березень", "квітень", "травень", "червень", "липень", "серпень", "вересень", "жовтень", "листопад", "грудень"], + "shortMonths": ["січ", "лют", "бер", "кві", "тра", "чер", "лип", "сер", "вер", "жов", "лис", "гру"] +}; + +const formatUk = d3.timeFormatLocale(ukLocale).format("%B"); class LineChartMini extends Component { @@ -72,7 +84,7 @@ class LineChartMini extends Component { svg.append("g") //.attr("class", "axis") .attr("transform", `translate(0, ${height})`) - .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%B"))) + .call(d3.axisBottom(xScale).tickFormat(formatUk)) /* .style("font-size", function() { if (length < 700){ @@ -206,7 +218,7 @@ class LineChartMini extends Component { .attr("x", 0 - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Oil Price ($)") + .text("Ціна на нафту ($)") .style("font-weight", "bold") svg @@ -214,7 +226,7 @@ class LineChartMini extends Component { .attr("class", "title") .attr("x", width / 2.5) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("Oil Prices in 2020") + .text("Ціни на нафту в 2020") .attr("fill", "black") .style("font-weight", "bold") @@ -233,7 +245,7 @@ class LineChartMini extends Component { }) .style("text-anchor", "middle") .style("font-weight", "bold") - .text("Month") + .text("Місяць") } diff --git a/ReactTool/frontend/src/components/pieChart-mini.js b/ReactTool/frontend/src/components/pieChart-mini.js index 6f925ca..b0ecd0f 100644 --- a/ReactTool/frontend/src/components/pieChart-mini.js +++ b/ReactTool/frontend/src/components/pieChart-mini.js @@ -60,7 +60,7 @@ class PieChartMini extends Component { .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); - var data = { Samsung: 17.6, Xiaomi: 15.5, Apple: 15.0, Oppo: 10.2, Vivo: 9.8, Others: 31.9 } + var data = { Samsung: 17.6, Xiaomi: 15.5, Apple: 15.0, Oppo: 10.2, Vivo: 9.8, Інші: 31.9 } const color = d3.scaleOrdinal() .range(['#0868ac', '#f03b20', '#feb24c', '#78c679', '#ffffb2', '#756bb1']) @@ -119,7 +119,7 @@ class PieChartMini extends Component { .attr("class", "title") .attr("x", -width / 5.5) .attr("y", -width / 3) // +20 to adjust position (lower) - .text("Global Smartphone Market Share in 2021") + .text("Світовий ринок смартфонів в 2021") .attr("fill", "black") .style("font-weight", "bold") diff --git a/ReactTool/frontend/src/components/scatterplot-mini.js b/ReactTool/frontend/src/components/scatterplot-mini.js index 467e38a..ab807fe 100644 --- a/ReactTool/frontend/src/components/scatterplot-mini.js +++ b/ReactTool/frontend/src/components/scatterplot-mini.js @@ -135,7 +135,7 @@ class ScatterPlotMini extends Component { .attr("x", 0 - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Weight (kg)") + .text("Маса (кг)") .style("font-weight", "bold") svg @@ -143,7 +143,7 @@ class ScatterPlotMini extends Component { .attr("class", "title") .attr("x", width / 4) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("Weight and Height of 85 Individuals") + .text("Маса та висота 85 осіб") .attr("fill", "black") .style("font-weight", "bold") @@ -159,7 +159,7 @@ class ScatterPlotMini extends Component { }) .style("text-anchor", "middle") .style("font-weight", "bold") - .text("Height (cm)") + .text("Висота (см)") }) diff --git a/ReactTool/frontend/src/components/stacked100bar-mini.js b/ReactTool/frontend/src/components/stacked100bar-mini.js index e949bc4..4bb5c30 100644 --- a/ReactTool/frontend/src/components/stacked100bar-mini.js +++ b/ReactTool/frontend/src/components/stacked100bar-mini.js @@ -152,7 +152,7 @@ class StackedBarChartMini extends Component { .attr("x", 0 - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Olympic Medals (%)") + .text("Олімпійські Медалі (%)") .style("font-weight", "bold") svg.append("text") @@ -167,7 +167,7 @@ class StackedBarChartMini extends Component { }) .style("text-anchor", "middle") .style("font-weight", "bold") - .text("Countries") + .text("Країни") //var legend = svg.append('g').attr('class', 'legend').attr('transform', 'translate(' + (margin.left/2) + ',0)'); @@ -274,7 +274,7 @@ class StackedBarChartMini extends Component { .attr("fill", "#feb24c") svg.append("text") - .text("Bronze") + .text("Бронза") .attr("x", function () { if (width < 500 && width > 400) { return width + (5.5 * width / margin.left) @@ -300,7 +300,7 @@ class StackedBarChartMini extends Component { .attr("class", "legend-value") svg.append("text") - .text("Silver") + .text("Срібло") .attr("x", function () { if (width < 500 && width > 400) { return width + (5.5 * width / margin.left) @@ -326,7 +326,7 @@ class StackedBarChartMini extends Component { .attr("class", "legend-value") svg.append("text") - .text("Gold") + .text("Золото") .attr("x", function () { if (width < 500 && width > 400) { return width + (5.5 * width / margin.left) @@ -363,7 +363,7 @@ class StackedBarChartMini extends Component { } }) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("Tokyo 2020 Olympics Performance Summary") + .text("Підсумок Олімпіади 2020 в Токіо") .attr("fill", "black") .style("font-weight", "bold") diff --git a/ReactTool/frontend/src/components/stackedArea-mini.js b/ReactTool/frontend/src/components/stackedArea-mini.js index 3046af1..de5d362 100644 --- a/ReactTool/frontend/src/components/stackedArea-mini.js +++ b/ReactTool/frontend/src/components/stackedArea-mini.js @@ -123,7 +123,7 @@ class StackedAreaPlotMini extends Component { .attr("x", 0 - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Number of Girls") + .text("Кількість дівчат") .style("font-weight", "bold") .style('font-size', function () { if (width < 500) { @@ -143,7 +143,7 @@ class StackedAreaPlotMini extends Component { }) .style("text-anchor", "middle") .style("font-weight", "bold") - .text("Year") + .text("Рік") const areaChart = svg.append('g') .attr("clip-path", "url(#clip)") @@ -276,7 +276,7 @@ class StackedAreaPlotMini extends Component { .attr("fill", "#3182bd") svg.append("text") - .text("Olivia") + .text("Олівія") .attr("x", function () { if (width < 500 && width > 400) { return width + (2 * width / margin.left) + length / 25; @@ -296,7 +296,7 @@ class StackedAreaPlotMini extends Component { .attr("class", "legend-value") svg.append("text") - .text("Isla") + .text("Айле") .attr("x", function () { if (width < 500 && width > 400) { return width + (2 * width / margin.left) + length / 25; @@ -317,7 +317,7 @@ class StackedAreaPlotMini extends Component { .attr("class", "legend-value") svg.append("text") - .text("Amelia") + .text("Амелія") .attr("x", function () { if (width < 500 && width > 400) { return width + (2 * width / margin.left) + length / 25; @@ -349,7 +349,7 @@ class StackedAreaPlotMini extends Component { } }) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("Popular Girls' names in the UK") + .text("Популярні жіночі імена в Великій Британії") .attr("fill", "black") .style("font-weight", "bold") }) diff --git a/ReactTool/frontend/src/components/stackedbar-mini.js b/ReactTool/frontend/src/components/stackedbar-mini.js index 19bd107..40b608d 100644 --- a/ReactTool/frontend/src/components/stackedbar-mini.js +++ b/ReactTool/frontend/src/components/stackedbar-mini.js @@ -172,7 +172,7 @@ class StackedBarChart2Mini extends Component { .attr("x", - (height / 1.9)) .attr("dy", "1em") .style("text-anchor", "middle") - .text("Cost ($)") + .text("Ціна ($)") .style("font-weight", "bold") svg.append("text") @@ -187,7 +187,7 @@ class StackedBarChart2Mini extends Component { }) .style("text-anchor", "middle") .style("font-weight", "bold") - .text("Cities") + .text("Міста") var dataNormalized = [] data.forEach(function (d) { @@ -339,7 +339,7 @@ class StackedBarChart2Mini extends Component { .attr("fill", "#7fc97f") svg.append("text") - .text("Vodka") + .text("Горілка") .attr("x", function () { if (width < 500 && width > 400) { return width + (5 * width / margin.left) @@ -365,7 +365,7 @@ class StackedBarChart2Mini extends Component { .attr("class", "legend-value") svg.append("text") - .text("Soda") + .text("Содова") .attr("x", function () { if (width < 500 && width > 400) { return width + (5 * width / margin.left) @@ -391,7 +391,7 @@ class StackedBarChart2Mini extends Component { .attr("class", "legend-value") svg.append("text") - .text("Peanut") + .text("Арахіс") .attr("x", function () { if (width < 500 && width > 400) { return width + (5 * width / margin.left) @@ -417,7 +417,7 @@ class StackedBarChart2Mini extends Component { .attr("class", "legend-value") svg.append("text") - .text("Water") + .text("Вода") .attr("x", function () { if (width < 500 && width > 400) { return width + (5 * width / margin.left) @@ -443,7 +443,7 @@ class StackedBarChart2Mini extends Component { .attr("class", "legend-value") svg.append("text") - .text("Sandwich") + .text("Сендвіч") .attr("x", function () { if (width < 500 && width > 400) { return width + (5 * width / margin.left) @@ -473,7 +473,7 @@ class StackedBarChart2Mini extends Component { .attr("class", "title") .attr("x", width / 3) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("Room Service Prices") + .text("Вартість обслуговування номера") .attr("fill", "black") .style("font-weight", "bold") }) diff --git a/ReactTool/frontend/src/components/treeMap-mini.js b/ReactTool/frontend/src/components/treeMap-mini.js index 5d5b011..822a918 100644 --- a/ReactTool/frontend/src/components/treeMap-mini.js +++ b/ReactTool/frontend/src/components/treeMap-mini.js @@ -200,7 +200,7 @@ class TreeMapMini extends Component { .attr("class", "title") .attr("x", width / margin.left) .attr("y", -length / margin.top) // +20 to adjust position (lower) - .text("The Number of Unique Visitors for Websites") + .text("Кількість унікальних відвідувачів вебсайтів") .attr("fill", "black") .style("font-weight", "bold") diff --git a/ReactTool/frontend/src/pages/visualization_quiz.js b/ReactTool/frontend/src/pages/visualization_quiz.js index a231a21..4bcf7a5 100644 --- a/ReactTool/frontend/src/pages/visualization_quiz.js +++ b/ReactTool/frontend/src/pages/visualization_quiz.js @@ -78,7 +78,7 @@ let minivis = [ 'vis': ScatterPlotMini, 'type': 'Точкова діаграма (Scatterplot)', 'question': 'Існує негативна лінійна залежність між ростом і вагою 85 чоловіків.', - 'options': ['True', 'False', "Пропустити"], + 'options': ['Вірно', 'Невірно', "Пропустити"], 'correct_answer': 1, 'cimage': img1 },