Skip to content

Commit

Permalink
Merge pull request #11 from ValtechMobility/dlcm/map_plugin_frontend_…
Browse files Browse the repository at this point in the history 
…improvements

Dlcm/map plugin frontend improvements
  • Loading branch information
@mishchenk0
mishchenk0 authored Jun 29, 2023
2 parents 13d944d + f9ffe5c commit 90329cd
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 35 deletions.
111 changes: 76 additions & 35 deletions superset-frontend/plugins/plugin-country-map-pie-chart/src/PluginCountryMapPieChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,7 @@ import React, { useEffect } from 'react';
// @ts-ignore
import { styled } from '@superset-ui/core';
import * as d3 from 'd3';
import {
GeoData,
PluginCountryMapPieChartProps,
PluginCountryMapPieChartStylesProps,
UpdateData,
} from './types';
import { GeoData, PluginCountryMapPieChartProps, PluginCountryMapPieChartStylesProps, UpdateData, } from './types';
// eslint-disable-next-line import/extensions
import * as geoData from './data/geo.json';
import useForceUpdate from 'antd/lib/_util/hooks/useForceUpdate';
Expand All @@ -43,9 +38,9 @@ const Styles = styled.div<PluginCountryMapPieChartStylesProps>`
margin-top: 0;
margin-bottom: ${ ({ theme }) => theme.gridUnit * 3 }px;
font-size: ${ ({ theme, headerFontSize }) =>
theme.typography.sizes[headerFontSize] }px;
theme.typography.sizes[headerFontSize] }px;
font-weight: ${ ({ theme, boldText }) =>
theme.typography.weights[boldText ? 'bold' : 'normal'] };
theme.typography.weights[boldText ? 'bold' : 'normal'] };
}
.pie-chart {
Expand All @@ -65,18 +60,23 @@ const Styles = styled.div<PluginCountryMapPieChartStylesProps>`
fill: #c2e0c8;
}
@font-face {
font-family: 'FKGrotesk';
font-weight: 700;
src: url('css/fonts/FKGrotesk-Medium.otf') format('opentype');
}
.unselected-country {
stroke: #7d9485;
stroke-linecap: round;
fill: #c2e0c8;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
font: 400 5px/1.5 'Source Sans Pro', 'Noto Sans', sans-serif;
}
.place-label {
fill: #000;
font: 400 10px/1.5 'Source Sans Pro', 'Noto Sans', sans-serif;
font-size: 10px;
}
`;

Expand All @@ -85,7 +85,6 @@ export default function PluginCountryMapPieChart(
) {
const { data, height, width } = props;
const selectedCountries = getAllSelectedCountries();
let selected = '';
let scale;
let center;
let radius;
Expand All @@ -108,25 +107,25 @@ export default function PluginCountryMapPieChart(
'Failed',
])
.range([
'#00872B',
'#48AD3E',
'#00437A',
'#C2CACF',
'#E4002C',
'#A9E3FF',
'#FFD100',
'#4CC7F4',
'#4CC7F4',
'#0082D6',
'#001E50',
'#6A767D',
'#EE7203',
'#008833',
'#ACA2F1',
'#7E24FF',
'#FAA000',
'#F80556',
'#FFC55B',
'#FF8E86',
'#2E218E',
'#442EE0',
'#00FA9A',
'#9E00FF',
'#FFF049',
'#EE4C40',
]);

// canvas of the world map
const svg = d3
.select('#groot')
.attr('style', 'background-color:#92B4F2;')
.attr('style', 'background-color: #92B4F2; border-radius: 8px;')
.attr('width', width - 32)
.attr('height', height - 64)
.select('#canvas');
Expand All @@ -135,13 +134,12 @@ export default function PluginCountryMapPieChart(
const filtered = geoData.features.filter(function (f) {
return f.iso === selectedCountries[0];
})[0];
selected = filtered.properties.name;
center = filtered.centroid;
scale = 2000;
radius = 50;
radius = 75;
} else {
scale = 800;
center = [15, 58];
scale = 1150;
center = [5, 60];
radius = 25;
}

Expand Down Expand Up @@ -185,6 +183,46 @@ export default function PluginCountryMapPieChart(
.attr('id', d => (d as unknown as GeoData).iso)
.attr('class', 'unselected-country')
.attr('filter', 'blur(5px)');

// labels for each country
svg
.append('g')
.selectAll('text')
.data(
geoData.features.filter(function (f) {
return selectedCountries.includes(f.iso);
}),
)
.enter()
.append('text')
.attr('id', d => `${ (d as unknown as GeoData).iso }Label`)
.attr('transform', function (d) {
let distance = 0.5;
if (d.properties.name.match('Norway') || d.properties.name.match('Sweden')) {
distance = -2.5;
}
if (d.properties.name.match('Cyprus') || d.properties.name.match('Luxembourg')) {
distance = 0.2;
}
if (d.properties.name.match('Germany') || d.properties.name.match('Spain')
|| d.properties.name.match('Finland') || d.properties.name.match('France')
|| d.properties.name.match('England') || d.properties.name.match('Greece')
|| d.properties.name.match('Italy') || d.properties.name.match('Poland')
|| d.properties.name.match('Portugal') || d.properties.name.match('Romania')
|| d.properties.name.match('Bulgaria')
) {
distance = 1.3;
}
return `translate(${ projection([
d.centroid[0],
d.centroid[1] - distance,
]) })`;
})
.attr('text-anchor', 'end')
.text(function (d) {
return d.properties.name;
})
.attr('style', 'font-size: 30px;');
} else {
projection = d3.geoTransverseMercator().center(center).scale(scale); // This is like the zoom
svg
Expand All @@ -211,9 +249,13 @@ export default function PluginCountryMapPieChart(
.attr('id', d => `${ (d as unknown as GeoData).iso }Label`)
.attr('class', 'place-label')
.attr('transform', function (d) {
let distance = 0;
if (d.properties.name.match('Germany')) {
distance = 0.7;
}
return `translate(${ projection([
d.centroid[0] - 1.7,
d.centroid[1],
d.centroid[0] - 2,
d.centroid[1] + distance,
]) })`;
})
.attr('text-anchor', 'end')
Expand Down Expand Up @@ -246,7 +288,7 @@ export default function PluginCountryMapPieChart(
scaledRadius = radius;
} else {
scaledRadius = Math.min(
Math.max(radius * (totalOperationCount / maxOperations), 7),
Math.max(radius * (totalOperationCount / maxOperations), 15),
radius,
);
}
Expand Down Expand Up @@ -298,8 +340,8 @@ export default function PluginCountryMapPieChart(
div
.html(`${ d.data.pie_detail }: ${ d.data['SUM(count_vin)'] }`)
.style('opacity', 1)
.style('left', `${ d3.event.pageX - x + 5 }px`)
.style('top', `${ d3.event.pageY - y - 5 }px`);
.style('left', `${ d3.event.pageX - x}px`)
.style('top', `${ d3.event.pageY - y - 130}px`);
})
.on('mouseout', function () {
div.html('').style('opacity', 0);
Expand Down Expand Up @@ -358,7 +400,6 @@ export default function PluginCountryMapPieChart(

return (
<Styles boldText={ props.boldText } headerFontSize={ props.headerFontSize }>
<h3>Campaign Status { selected }</h3>
<div id="country_pie_map">
<div id="tooltip_text"/>
<svg id="groot">
Expand Down
Binary file added superset-frontend/plugins/plugin-country-map-pie-chart/src/css/fonts/FKGrotesk-Medium.otf
View file
Binary file not shown.

0 comments on commit 90329cd

Please sign in to comment.