Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
@MatsJohansen87
MatsJohansen87 committed Oct 17, 2023
2 parents e185a23 + d5a9e3e commit 9b53e0c
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 45 deletions.
4 changes: 2 additions & 2 deletions packages/demo/src/styles/default/searchbars.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ lens-search-bar-multiple::part(lens-searchbar-chips) {
lens-search-bar::part(lens-searchbar-chip-name),
lens-search-bar-multiple::part(lens-searchbar-chip-name) {
font-weight: bold;
padding-right: var(--gap-xs);
}

lens-search-bar::part(lens-searchbar-chip),
Expand All @@ -65,10 +66,9 @@ lens-search-bar-multiple::part(lens-searchbar-chip) {
border: solid 1px var(--lightest-gray);
border-radius: var(--border-radius-small);
width: max-content;
padding: 2px var(--gap-xs);
padding: 2px var(--gap-s) 2px var(--gap-xs);
display: flex;
align-items: center;
gap: var(--gap-xs);
position: relative;
}

Expand Down
57 changes: 35 additions & 22 deletions packages/lib/src/components/results/ChartComponent.wc.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
export let groupRange: number | null = null;
export let groupingDivider: string | null = null;
export let filterRegex: string | null = null;
export let groupingLabel: string = '';
export let groupingLabel: string = "";
export let backgroundColor: string[] = [
"#4dc9f6",
Expand Down Expand Up @@ -135,6 +135,18 @@
);
return data?.population[0]?.count || 0;
});
return {
labels: chartLabels,
data: [
{
label: "",
data: dataSet,
backgroundColor,
backgroundHoverColor,
},
],
};
} else {
dataSet = chartLabels.map((label: string): number => {
const stratifierCode = label;
Expand Down Expand Up @@ -187,14 +199,12 @@
responseStore: ResponseStore,
labels: string[]
): { labels: string[]; data: number[] } => {
const groupedChartData: { label: string; value: number }[] =
labels.reduce((acc, label) => {
/**
* see if the label contains the divider
* if not, add it to the accumulator with a .% at the end
*/
*/
if (!label.includes(divider)) {
return [
...acc,
Expand All @@ -215,27 +225,30 @@
* and add it to the accumulator
*/
let superClassItem: { label: string; value: number } = acc.find(
(item) => item.label === label.split(divider)[0] + groupingLabel
(item) =>
item.label === label.split(divider)[0] + groupingLabel
);
if (!superClassItem) {
superClassItem = {
label: label.split(divider)[0] + groupingLabel,
value: 0,
};
}
superClassItem.value +=
getAggregatedPopulationForStratumCode(
responseStore,
label
);
superClassItem.value += getAggregatedPopulationForStratumCode(
responseStore,
label
);
return [
...acc.filter((item) => item.label !== label.split(divider)[0] + groupingLabel),
...acc.filter(
(item) =>
item.label !==
label.split(divider)[0] + groupingLabel
),
superClassItem,
];
}, []);
return {
Expand Down Expand Up @@ -274,23 +287,23 @@
}
chartLabels = filterRegexMatch(chartLabels);
chartLabels.sort(customSort);
/**
* remove labels and their corresponding data if the label is an empty string or null
*/
chartLabels = chartLabels.filter(
(label) => label !== "" && label !== null && label !== "null"
);
/**
* get the chart data sets from the response store
);
/**
* get the chart data sets from the response store
* will be aggregated in groups if a divider is set
* eg. 'C30', 'C31.1', 'C31.2' -> 'C31' when divider is '.'
*/
let chartData = getChartDataSets(responseStore, chartLabels);
chart.data.datasets = chartData.data;
chartLabels = chartData.labels;
/**
* lets the user define a range for the labels when only single values are used eg. '60' -> '60 - 69'
*/
Expand All @@ -300,7 +313,7 @@
* check if label doesn't parse to a number
*/
if (isNaN(parseInt(label))) return label;
return `${parseInt(label)} - ${parseInt(label) + groupRange}`;
});
}
Expand Down
47 changes: 26 additions & 21 deletions packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,13 @@
* watches the input value and updates the input options
*/
$: $inputOptions = criteria.filter((item: AutoCompleteItem) => {
/**
* lets the user use a number followed by a colon to specify the search group. nice to have for the power users
*/
const clearedInputValue = inputValue
.replace(/^[0-9]*:/g, "")
.toLocaleLowerCase();
return (
item.name.toLowerCase().includes(clearedInputValue) ||
item.criterion.name.toLowerCase().includes(clearedInputValue) ||
Expand All @@ -139,8 +143,8 @@
.includes(clearedInputValue)
/**
* FIX ME:
* should only take names. This needs a catalogue fix
* Discussion:
* should it also be possible to search for the key?
*/
// item.key.toLocaleLowerCase().includes(clearedInputValue) ||
// item.criterion.key.toLowerCase().includes(clearedInputValue) ||
Expand Down Expand Up @@ -299,26 +303,23 @@
{#each queryGroup as queryItem (queryItem.id)}
<div part="lens-searchbar-chip">
<span part="lens-searchbar-chip-name"
>{queryItem.name}:{" "}</span
>{queryItem.name}:</span
>
{#each queryItem.values as value, i (value.queryBindId)}
<span part="lens-searchbar-chip-item">
<span>{value.name}</span>
<StoreDeleteButtonComponent
itemToDelete={{
type: "value",
index,
item: {
...queryItem,
values: [value],
},
}}
/>
<span
>{i === queryItem.values.length - 1
? ""
: ""}</span
>
{#if queryItem.values.length > 1}
<StoreDeleteButtonComponent
itemToDelete={{
type: "value",
index,
item: {
...queryItem,
values: [value],
},
}}
/>
{/if}
</span>
{/each}
<StoreDeleteButtonComponent
Expand Down Expand Up @@ -349,8 +350,10 @@
<ul part="lens-searchbar-autocomplete-options">
{#if $inputOptions?.length > 0}
{#each $inputOptions as inputOption, i}
{#if $inputOptions.map( option => option.name).indexOf(inputOption.name) === i}
<div part="autocomplete-options-category-name">
{#if $inputOptions
.map((option) => option.name)
.indexOf(inputOption.name) === i}
<div part="autocomplete-options-item-name">
{@html getBoldedText(inputOption.name)}
</div>
{/if}
Expand All @@ -366,7 +369,9 @@
on:mousedown={() => selectItemByClick(inputOption)}
>
<div part="autocomplete-options-item-name">
{@html getBoldedText(inputOption.criterion.name)}
{@html getBoldedText(
inputOption.criterion.name
)}
</div>
{#if inputOption.criterion.description}
<div
Expand Down

0 comments on commit 9b53e0c

Please sign in to comment.