Skip to content

Commit 4ab571d

Browse files
ajhillman-ddjajhillman-ddj
authored
Merge pull request #150 from communitiesuk/domain-comparison
Position chart and position chart axis components
2 parents 08bd15a + 99ea013 commit 4ab571d

File tree

8 files changed

+38578
-37425
lines changed

8 files changed

+38578
-37425
lines changed

‎src/lib/components/data-vis/position-chart/PositionChart.svelte‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<script>
2+
import { scaleLinear } from "d3-scale";
3+
import PositionChartAxis from "./PositionChartAxis.svelte";
4+
let {
5+
value = undefined,
6+
min = undefined,
7+
max = undefined,
8+
label = undefined,
9+
showAxis = true,
10+
chartWidth = $bindable(500),
11+
stacked = false,
12+
numberOfPositionCharts = 1,
13+
chartHeight = 24,
14+
} = $props();
15+
16+
const range = Array.from({ length: 10 }, (_, i) => i);
17+
18+
// the 'chart' is the bar and the marker - its height is a prop and its width is binded to clientWidth
19+
20+
// the 'marker' is the circle
21+
let markerRadius = $derived(chartHeight / 2);
22+
23+
// the 'bar' is the 10 rectangles side by side
24+
let barWidth = $derived(chartWidth - markerRadius * 2);
25+
let barHeight = $derived((chartHeight * 5) / 6);
26+
27+
let xFunction = $derived(
28+
scaleLinear().domain([min, max]).range([0, barWidth]),
29+
);
30+
31+
const colorScale = [
32+
"#090C50",
33+
"#1B3E70",
34+
"#2B658F",
35+
"#357EA2",
36+
"#4297AD",
37+
"#5BB1AE",
38+
"#7ABFA8",
39+
"#98CCA2",
40+
"#B6D89F",
41+
"#D2E49D",
42+
];
43+
</script>
44+
45+
<div
46+
class={label ? "grid-container" : "chart-and-axis"}
47+
class:stacked={stacked === true}
48+
style=" --rows: {numberOfPositionCharts + 1};"
49+
>
50+
{#if label}
51+
<p class="label">{label}</p>
52+
{/if}
53+
54+
<div
55+
class="chart"
56+
style="height: {chartHeight}px"
57+
bind:clientWidth={chartWidth}
58+
>
59+
<svg width={chartWidth} height={chartHeight}>
60+
{#each range as number}
61+
<g
62+
transform="translate({markerRadius +
63+
(barWidth * number) / 10},{(chartHeight - barHeight) / 2})"
64+
><rect
65+
width={barWidth / 10}
66+
height={barHeight}
67+
fill={colorScale[number]}
68+
></rect></g
69+
>{/each}
70+
<g
71+
transform="translate({xFunction(value) + markerRadius},{chartHeight /
72+
2})"
73+
><circle r={markerRadius} cx="0" cy="0" fill="#CA357C" stroke="white"
74+
></circle></g
75+
>
76+
</svg>
77+
</div>
78+
79+
{#if showAxis === true}
80+
<div class="axis">
81+
<PositionChartAxis {markerRadius} {barWidth}></PositionChartAxis>
82+
</div>
83+
{/if}
84+
</div>
85+
86+
<style>
87+
.grid-container {
88+
display: grid;
89+
grid-template-columns: auto 1fr;
90+
grid-template-rows: repeat(var(--rows), 1fr);
91+
align-items: center;
92+
column-gap: 2%;
93+
row-gap: 0;
94+
}
95+
.grid-container.stacked {
96+
display: contents;
97+
}
98+
.label {
99+
text-align: right;
100+
margin: 0;
101+
line-height: 1.05;
102+
}
103+
.chart-and-axis {
104+
display: flex;
105+
flex-direction: column;
106+
}
107+
.chart {
108+
display: flex;
109+
justify-content: center;
110+
min-width: 0;
111+
}
112+
.axis {
113+
grid-row: var(--rows);
114+
grid-column: 2;
115+
}
116+
</style>

‎src/lib/components/data-vis/position-chart/PositionChartAxis.svelte‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script>
2+
let { markerRadius = undefined, barWidth = undefined } = $props();
3+
</script>
4+
5+
<div class="axis" style="--axis-padding:{markerRadius}px; width: {barWidth}">
6+
<div class="more-deprived">
7+
<svg
8+
xmlns="http://www.w3.org/2000/svg"
9+
width="11"
10+
height="16"
11+
viewBox="0 0 11 16"
12+
fill="none"
13+
>
14+
<path
15+
d="M0.292893 7.29289C-0.0976315 7.68342 -0.0976314 8.31658 0.292893 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928933L0.292893 7.29289ZM11 8L11 7L1 7L1 8L1 9L11 9L11 8Z"
16+
fill="#B1B4B6"
17+
></path>
18+
</svg>
19+
<span>More deprived</span>
20+
</div>
21+
<div class="less-deprived">
22+
<span>Less deprived</span>
23+
<svg
24+
xmlns="http://www.w3.org/2000/svg"
25+
width="12"
26+
height="16"
27+
viewBox="0 0 12 16"
28+
fill="none"
29+
>
30+
<path
31+
d="M11.2071 8.70711C11.5976 8.31658 11.5976 7.68342 11.2071 7.2929L4.84315 0.928933C4.45262 0.538409 3.81946 0.538408 3.42893 0.928933C3.03841 1.31946 3.03841 1.95262 3.42893 2.34315L9.08579 8L3.42893 13.6569C3.03841 14.0474 3.03841 14.6805 3.42893 15.0711C3.81946 15.4616 4.45262 15.4616 4.84314 15.0711L11.2071 8.70711ZM0.5 8L0.5 9L10.5 9L10.5 8L10.5 7L0.5 7L0.5 8Z"
32+
fill="#B1B4B6"
33+
></path>
34+
</svg>
35+
</div>
36+
</div>
37+
38+
<style>
39+
.axis {
40+
display: flex;
41+
justify-content: space-between;
42+
align-items: center;
43+
padding: 0 var(--axis-padding);
44+
}
45+
46+
.less-deprived,
47+
.more-deprived {
48+
display: flex;
49+
align-items: center;
50+
gap: 5px;
51+
}
52+
53+
/* Tell the parent to act as a container */
54+
.axis {
55+
container-type: inline-size;
56+
}
57+
58+
/* Container query: hide the child if parent's width is less than 400px */
59+
@container (max-width: 18rem) {
60+
.less-deprived {
61+
display: none;
62+
}
63+
}
64+
65+
@container (max-width: 25rem) {
66+
.average {
67+
display: none;
68+
}
69+
}
70+
</style>

‎src/lib/index.ts‎

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,51 @@
11
// this file is auto-generated — do not edit by hand
22
import "./main.css";
33

4-
export { default as InsetText } from './components/content/InsetText.svelte';
5-
export { default as WarningText } from './components/content/WarningText.svelte';
6-
export { default as Axis } from './components/data-vis/axis/Axis.svelte';
7-
export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
8-
export { default as Line } from './components/data-vis/line-chart/Line.svelte';
9-
export { default as LineChart } from './components/data-vis/line-chart/LineChart.svelte';
10-
export { default as Lines } from './components/data-vis/line-chart/Lines.svelte';
11-
export { default as Marker } from './components/data-vis/line-chart/Marker.svelte';
12-
export { default as SeriesLabel } from './components/data-vis/line-chart/SeriesLabel.svelte';
13-
export { default as ValueLabel } from './components/data-vis/line-chart/ValueLabel.svelte';
14-
export { default as Map } from './components/data-vis/map/Map.svelte';
15-
export { default as MapLegend } from './components/data-vis/map/MapLegend.svelte';
16-
export { default as NonStandardControls } from './components/data-vis/map/NonStandardControls.svelte';
17-
export { default as Tooltip } from './components/data-vis/map/Tooltip.svelte';
18-
export { default as Table } from './components/data-vis/table/Table.svelte';
19-
export { default as Breadcrumbs } from './components/layout/Breadcrumbs.svelte';
20-
export { default as Footer } from './components/layout/Footer.svelte';
21-
export { default as Header } from './components/layout/Header.svelte';
22-
export { default as InternalHeader } from './components/layout/InternalHeader.svelte';
23-
export { default as PhaseBanner } from './components/layout/PhaseBanner.svelte';
24-
export { default as ServiceNavigation } from './components/layout/ServiceNavigation.svelte';
25-
export { default as SideNavigation } from './components/layout/SideNavigation.svelte';
26-
export { default as HeaderNav } from './components/layout/service-navigation-nested-mobile/HeaderNav.svelte';
27-
export { default as MobileNav } from './components/layout/service-navigation-nested-mobile/MobileNav.svelte';
28-
export { default as ServiceNavigationNestedMobile } from './components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte';
29-
export { default as SideNav } from './components/layout/service-navigation-nested-mobile/SideNav.svelte';
30-
export { default as Accordion } from './components/ui/Accordion.svelte';
31-
export { default as Button } from './components/ui/Button.svelte';
32-
export { default as CheckBox } from './components/ui/CheckBox.svelte';
33-
export { default as ContentsList } from './components/ui/ContentsList.svelte';
34-
export { default as CookieBanner } from './components/ui/CookieBanner.svelte';
35-
export { default as DateInput } from './components/ui/DateInput.svelte';
36-
export { default as Details } from './components/ui/Details.svelte';
37-
export { default as FilterPanel } from './components/ui/FilterPanel.svelte';
38-
export { default as Masthead } from './components/ui/Masthead.svelte';
39-
export { default as NavigationExample } from './components/ui/NavigationExample.svelte';
40-
export { default as NotificationBanner } from './components/ui/NotificationBanner.svelte';
41-
export { default as PostcodeOrAreaSearch } from './components/ui/PostcodeOrAreaSearch.svelte';
42-
export { default as Radios } from './components/ui/Radios.svelte';
43-
export { default as RelatedContent } from './components/ui/RelatedContent.svelte';
44-
export { default as Search } from './components/ui/Search.svelte';
45-
export { default as SearchAutocomplete } from './components/ui/SearchAutocomplete.svelte';
46-
export { default as Select } from './components/ui/Select.svelte';
47-
export { default as SidePanel } from './components/ui/SidePanel.svelte';
48-
export { default as Tabs } from './components/ui/Tabs.svelte';
49-
export { default as WhatsNew } from './components/ui/WhatsNew.svelte';
4+
export { default as InsetText } from "./components/content/InsetText.svelte";
5+
export { default as WarningText } from "./components/content/WarningText.svelte";
6+
export { default as Axis } from "./components/data-vis/axis/Axis.svelte";
7+
export { default as Ticks } from "./components/data-vis/axis/Ticks.svelte";
8+
export { default as Line } from "./components/data-vis/line-chart/Line.svelte";
9+
export { default as LineChart } from "./components/data-vis/line-chart/LineChart.svelte";
10+
export { default as Lines } from "./components/data-vis/line-chart/Lines.svelte";
11+
export { default as Marker } from "./components/data-vis/line-chart/Marker.svelte";
12+
export { default as SeriesLabel } from "./components/data-vis/line-chart/SeriesLabel.svelte";
13+
export { default as ValueLabel } from "./components/data-vis/line-chart/ValueLabel.svelte";
14+
export { default as Map } from "./components/data-vis/map/Map.svelte";
15+
export { default as MapLegend } from "./components/data-vis/map/MapLegend.svelte";
16+
export { default as NonStandardControls } from "./components/data-vis/map/NonStandardControls.svelte";
17+
export { default as Tooltip } from "./components/data-vis/map/Tooltip.svelte";
18+
export { default as Table } from "./components/data-vis/table/Table.svelte";
19+
export { default as Breadcrumbs } from "./components/layout/Breadcrumbs.svelte";
20+
export { default as Footer } from "./components/layout/Footer.svelte";
21+
export { default as Header } from "./components/layout/Header.svelte";
22+
export { default as InternalHeader } from "./components/layout/InternalHeader.svelte";
23+
export { default as PhaseBanner } from "./components/layout/PhaseBanner.svelte";
24+
export { default as ServiceNavigation } from "./components/layout/ServiceNavigation.svelte";
25+
export { default as SideNavigation } from "./components/layout/SideNavigation.svelte";
26+
export { default as HeaderNav } from "./components/layout/service-navigation-nested-mobile/HeaderNav.svelte";
27+
export { default as MobileNav } from "./components/layout/service-navigation-nested-mobile/MobileNav.svelte";
28+
export { default as ServiceNavigationNestedMobile } from "./components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte";
29+
export { default as SideNav } from "./components/layout/service-navigation-nested-mobile/SideNav.svelte";
30+
export { default as Accordion } from "./components/ui/Accordion.svelte";
31+
export { default as Button } from "./components/ui/Button.svelte";
32+
export { default as CheckBox } from "./components/ui/CheckBox.svelte";
33+
export { default as ContentsList } from "./components/ui/ContentsList.svelte";
34+
export { default as CookieBanner } from "./components/ui/CookieBanner.svelte";
35+
export { default as DateInput } from "./components/ui/DateInput.svelte";
36+
export { default as Details } from "./components/ui/Details.svelte";
37+
export { default as FilterPanel } from "./components/ui/FilterPanel.svelte";
38+
export { default as Masthead } from "./components/ui/Masthead.svelte";
39+
export { default as NavigationExample } from "./components/ui/NavigationExample.svelte";
40+
export { default as NotificationBanner } from "./components/ui/NotificationBanner.svelte";
41+
export { default as PostcodeOrAreaSearch } from "./components/ui/PostcodeOrAreaSearch.svelte";
42+
export { default as Radios } from "./components/ui/Radios.svelte";
43+
export { default as RelatedContent } from "./components/ui/RelatedContent.svelte";
44+
export { default as Search } from "./components/ui/Search.svelte";
45+
export { default as SearchAutocomplete } from "./components/ui/SearchAutocomplete.svelte";
46+
export { default as Select } from "./components/ui/Select.svelte";
47+
export { default as SidePanel } from "./components/ui/SidePanel.svelte";
48+
export { default as Tabs } from "./components/ui/Tabs.svelte";
49+
export { default as WhatsNew } from "./components/ui/WhatsNew.svelte";
50+
export { default as PositionChart } from "./components/data-vis/position-chart/PositionChart.svelte";
51+
export { default as PositionChartAxis } from "./components/data-vis/position-chart/PositionChartAxis.svelte";

‎src/routes/+layout.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ export const load: LayoutLoad = async (event) => {
111111

112112
let deprivationMetaData = testData.deprivationMetaData;
113113

114+
let deprivationDomainData = testData.domainData
115+
116+
114117
return {
115118
metrics,
116119
areas,
@@ -126,5 +129,6 @@ export const load: LayoutLoad = async (event) => {
126129
metaData,
127130
deprivationData,
128131
deprivationMetaData,
132+
deprivationDomainData
129133
};
130134
};

0 commit comments

Comments
 (0)