Merge pull request #15 from FLo-ABB/Refactoring

Refactoring Responsiveness and html architecture

assets/chartUtils.js

@@ -0,0 +1,137 @@
+function createEmptyChart(ctx) {
+    const chartOptions = {
+        type: 'scatter',
+        data: {
+            datasets: []
+        },
+        options: {
+            scales: {
+                x: {
+                    type: 'logarithmic',
+                    title: {
+                        display: true,
+                        text: 'Payload (kg)'
+                    }
+                },
+                y: {
+                    type: 'logarithmic',
+                    title: {
+                        display: true,
+                        text: 'Reach (mm)'
+                    }
+                }
+            },
+            plugins: {
+                tooltip: {
+                    callbacks: {
+                        label: tooltipItem => { return getTooltipLabel(tooltipItem) },
+                        afterFooter: chart => { return afterFooterCallback(chart) }
+                    }
+                },
+                legend: {
+                    display: false
+                },
+                zoom: {
+                    zoom: {
+                        wheel: {
+                            enabled: true
+                        },
+                        pinch: {
+                            enabled: true
+                        },
+                        mode: 'xy'
+                    },
+                    pan: {
+                        enabled: true,
+                        mode: 'xy'
+                    }
+                }
+            },
+            maintainAspectRatio: false
+        }
+    };
+    return new Chart(ctx, chartOptions);
+}
+
+function getTooltipLabel(tooltipItem) {
+    return tooltipItem.chart.data.datasets[tooltipItem.datasetIndex].data[tooltipItem.dataIndex].name;
+}
+
+function afterFooterCallback(chart) {
+    const dataset = chart[0].dataset;
+    const data = dataset.data[chart[0].dataIndex];
+    document.getElementById('IRBName').innerHTML = data.name;
+    document.getElementById('image').setAttribute('src', "assets/img/" + data.product_thumb);
+    document.getElementById('descr').innerHTML = data.description;
+    document.getElementById('More').setAttribute('href', data.read_more_url);
+    document.getElementById('More').innerHTML = "Learn more...";
+    document.getElementById('color').setAttribute('style', "background-color:" + data.random_color);
+    // in div with id supported_controllers, create for each controller a div with class controller_supported with the name of the controller in valie
+    document.getElementById('supported_controllers').innerHTML = "";
+    data.controller.forEach(controller => {
+        let div = document.createElement('div');
+        div.setAttribute('class', 'controller_supported');
+        // use the dict controllers to get the display name
+        div.innerHTML = controllers[controller];
+        document.getElementById('supported_controllers').appendChild(div);
+    }
+    );
+}
+
+function createRobotPoints(chart, robot, populationSize, index) {
+    const newRobotDataset = {
+        label: "Robots",
+        data: [],
+        backgroundColor: 'rgb(20, 20, 20)',
+        showLine: true,
+        borderColor: function (context) {
+            return context.dataset.data[0].random_color;
+        },
+        pointBackgroundColor: function (context) {
+            return context.dataset.data[0].random_color;
+        },
+        pointRadius: function (context) {
+            return context.dataset.data[0].show ? 3 : 0;
+        },
+        borderWidth: function (context) {
+            return context.dataset.data[0].show ? 2 : 0;
+        },
+        lineTension: 0.3
+    }
+    chart.data.datasets[index] = newRobotDataset;
+    let colors = generateDistinctColors(populationSize);
+    let randomColor = colors[index];
+    robot.variants.forEach(variant => {
+        chart.data.datasets[chart.data.datasets.length - 1].data.push({
+            y: variant.reach * 1000,
+            x: variant.capacity,
+            name: variant.name,
+            product_thumb: robot.product_thumb,
+            description: robot.description,
+            read_more_url: robot.read_more_url,
+            random_color: randomColor,
+            controller: robot.controller,
+            show: true
+        });
+    });
+}
+
+function getResizedChart(chart) {
+    let minReach = Infinity;
+    let minPayload = Infinity;
+    let maxReach = -Infinity;
+    let maxPayload = -Infinity;
+    chart.data.datasets.forEach(dataset => {
+        dataset.data.forEach(data => {
+            minReach = Math.min(minReach, data.y * 0.9);
+            minPayload = Math.min(minPayload, data.x * 0.9);
+            maxReach = Math.max(maxReach, data.y * 1.2);
+            maxPayload = Math.max(maxPayload, data.x * 1.2);
+        });
+    });
+    chart.options.scales.y.min = minReach;
+    chart.options.scales.x.min = minPayload;
+    chart.options.scales.y.max = maxReach;
+    chart.options.scales.x.max = maxPayload;
+    return chart;
+}

assets/colorsUtils.js

@@ -0,0 +1,50 @@
+function generateDistinctColors(numColors) {
+    /**
+     * Generate an array of distinct colors
+     * @param {number} numColors - Number of colors to generate
+     * @returns {string[]} Array of colors in rgb format
+     * @see https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
+     */
+    const colors = [];
+    const goldenRatio = 0.618033988749895;
+    let hue = 0.8;
+    for (let i = 0; i < numColors; i++) {
+        hue += goldenRatio;
+        hue %= 1;
+        const color = hsvToRgb(hue, 0.95, 0.95); // value mean
+        colors.push(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
+    }
+    return colors;
+}
+
+function hsvToRgb(h, s, v) {
+    /**
+     * Convert HSV to RGB
+     * @param {number} h - Hue
+     * @param {number} s - Saturation
+     * @param {number} v - Value
+     * @returns {number[]} Array of RGB values
+     */
+    let r, g, b;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+
+    switch (i % 6) {
+        case 0:
+            r = v; g = t; b = p; break;
+        case 1:
+            r = q; g = v; b = p; break;
+        case 2:
+            r = p; g = v; b = t; break;
+        case 3:
+            r = p; g = q; b = v; break;
+        case 4:
+            r = t; g = p; b = v; break;
+        case 5:
+            r = v; g = p; b = q; break;
+    }
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}

assets/dataUtils.js

@@ -0,0 +1,11 @@
+function getNumberOfRobotsByType(type, json) {
+    return json.items.filter(item => item.product_type === type || (type === "Palletizer" && ["IRB 460", "IRB 760", "IRB 660"].includes(item.product_name))).length;
+}
+
+function getJsonVariantSorted(json, sortBy = "payload") {
+    const sortProperty = sortBy === "payload" ? "capacity" : "reach";
+    json.items.forEach(item => {
+        item.variants.sort((a, b) => (a[sortProperty] - b[sortProperty]));
+    });
+    return json;
+}

assets/main.js

@@ -0,0 +1,33 @@
+const charts = [
+    getRobotChart('myChartArticulated', "Articulated"),
+    getRobotChart('myChartPalletizer', "Palletizer"),
+    getRobotChart('myChartSCARA', "SCARA"),
+    getRobotChart('myChartPicker', "Parallel"),
+    getRobotChart('myChartPaint', "Paint"),
+    getRobotChart('myChartCollaborative', "Collaboratives")
+];
+
+const controllers = {
+    "IRC5 Compact": "IRC5 Compact",
+    "IRC5 Panel Mounted Controller": "IRC5 PMC",
+    "IRC5 Single Cabinet": "IRC5 Single",
+    "OmniCore V250XT": "OmniCore V250XT",
+    "OmniCore C30": "OmniCore C30",
+    "OmniCore E10": "OmniCore E10",
+    "OmniCore C90XT": "OmniCore C90XT"
+};
+
+function getRobotChart(chartId, productType) {
+    const chartContext = document.getElementById(chartId).getContext('2d');
+    const actualChart = createEmptyChart(chartContext);
+    const sortedJson = getJsonVariantSorted(myJson, "payload");
+    const filteredRobots = sortedJson.items.filter(robot => ((robot.product_type === productType) && !["IRB 460", "IRB 760", "IRB 660"].includes(robot.product_name)) || (productType === "Palletizer" && ["IRB 460", "IRB 760", "IRB 660"].includes(robot.product_name)));
+    filteredRobots.forEach((robot, index) => {
+        createRobotPoints(actualChart, robot, getNumberOfRobotsByType(productType, myJson), index);
+    });
+    const resizedChart = getResizedChart(actualChart);
+    resizedChart.update();
+    return resizedChart;
+}
+
+document.getElementById("defaultOpen").click();