Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop #16

Merged
merged 2 commits into from
Oct 26, 2023
Merged

Develop #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c757008
feat(chart): add legend mapping
MatsJohansen87 Oct 26, 2023
63faa2e
fix(chart): fix label sorting
MatsJohansen87 Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 47 additions & 8 deletions packages/demo/public/options.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,58 @@
{"chartOptions":
{
{
"chartOptions": {
"patients": {
"legendMapping": {
"berlin": "Berlin",
"bonn": "Bonn",
"dresden": "Dresden",
"essen": "Essen",
"frankfurt": "Frankfurt",
"freiburg": "Freiburg",
"hannover": "Hannover",
"mainz": "Mainz",
"muenchen-lmu": "München(LMU)",
"muenchen-tum": "München(TUM)",
"ulm": "Ulm",
"wuerzburg": "Würzburg",
"mannheim": "Mannheim",
"dktk-test": "DKTK-Test",
"hamburg": "Hamburg"
}
},
"gender": {
"legendMapping": {
"male": "Männlich",
"female": "Weiblich",
"unknown": "Unbekannt",
"other": "Divers"
}
},
"diagnosis": {
"hintText": ["Bei Patienten mit mehreren onkologischen Diagnosen werden auch Einträge angezeigt, die ggfs. nicht den ausgewählten Suchkriterien entsprechen."]
"hintText": [
"Bei Patienten mit mehreren onkologischen Diagnosen werden auch Einträge angezeigt, die ggfs. nicht den ausgewählten Suchkriterien entsprechen."
]
},
"age_at_diagnosis": {
"hintText": ["Bei Patienten mit mehreren Erstdiagnosen werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen. "]
"hintText": [
"Bei Patienten mit mehreren Erstdiagnosen werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen. "
]
},
"75186-7": {
"hintText": ["\"verstorben\": ein Todesdatum ist dokumentiert oder das aktuelle Lebensalter ist größer 123 Jahre.", "\"lebend\": wird angenommen, wenn kein Todesdatum dokumentiert ist oder das aktuelle Lebensalter nicht 123 Jahre überschritten hat.", "\"unbekannt\": kein Geburtsdatum oder Todesdatum bekannt."]
"hintText": [
"\"verstorben\": ein Todesdatum ist dokumentiert oder das aktuelle Lebensalter ist größer 123 Jahre.",
"\"lebend\": wird angenommen, wenn kein Todesdatum dokumentiert ist oder das aktuelle Lebensalter nicht 123 Jahre überschritten hat.",
"\"unbekannt\": kein Geburtsdatum oder Todesdatum bekannt."
]
},
"medicationStatements": {
"hintText": ["Art der systemischen oder abwartenden Therapie (ADT Basisdatensatz Versionen 2014, 2021)"]
"hintText": [
"Art der systemischen oder abwartenden Therapie (ADT Basisdatensatz Versionen 2014, 2021)"
]
},
"sample_kind": {
"hintText":["Verteilung der Bioprobentypen der Patienten gemäß der ausgewählten Kriterien. Es werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen."]
}
"hintText": [
"Verteilung der Bioprobentypen der Patienten gemäß der ausgewählten Kriterien. Es werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen."
]
}
}
}
101 changes: 67 additions & 34 deletions packages/lib/src/components/results/ChartComponent.wc.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,11 @@
export let groupingLabel: string = "";
export let viewScales: boolean = chartType !== "pie" ? true : false;

let options: any
$: options = $lensOptions?.chartOptions && $lensOptions?.chartOptions[catalogueGroupCode] || {}
let options: any;
$: options =
($lensOptions?.chartOptions &&
$lensOptions?.chartOptions[catalogueGroupCode]) ||
{};

export let backgroundColor: string[] = [
"#4dc9f6",
Expand Down Expand Up @@ -107,43 +110,56 @@
position: "bottom",
},
tooltip: {
callbacks: {
title: (context: any) => {
const key = context[0].label || '';
let result = (tooltips.get(key))
? tooltips.get(key) : key;
return result
}
}
}
callbacks: {
title: (context: any) => {
const key = context[0].label || "";
let result = tooltips.get(key)
? tooltips.get(key)
: key;
return result;
},
},
},
},
scales: {
y: {
display: viewScales,
title: {
display: true,
text: yAxisTitle
text: yAxisTitle,
},
},
x: {
display: viewScales,
title: {
display: true,
text: xAxisTitle
text: xAxisTitle,
},
ticks: (chartType === "bar") ? {
callback: (val: any) => {
if(indexAxis === 'y') return val.toString()
if (typeof val === 'string') return val
const key: unknown = (initialChartData.data.labels[val]) !== undefined
? initialChartData.data.labels[val] : val.toString();
if (typeof key !== 'string') return val.toString()
let result = (headers.get(key)) ? headers.get(key) : key;
return result
}
} : []
}
}
ticks:
chartType === "bar"
? {
callback: (val: any) => {
if (indexAxis === "y")
return val.toString();
if (typeof val === "string") return val;
const key: unknown =
initialChartData.data.labels[val] !==
undefined
? initialChartData.data.labels[
val
]
: val.toString();
if (typeof key !== "string")
return val.toString();
let result = headers.get(key)
? headers.get(key)
: key;
return result;
},
}
: [],
},
},
},
};

Expand Down Expand Up @@ -363,11 +379,20 @@
*/
if (isNaN(parseInt(label))) return label;

return `${parseInt(label)} - ${parseInt(label) + groupRange - 1}`;
return `${parseInt(label)} - ${
parseInt(label) + groupRange - 1
}`;
});
}

chart.data.labels = chartLabels;
/**
* set the labels of the chart
* if a legend mapping is set, use the legend mapping
*/
chart.data.labels = options.legendMapping ? chartLabels.map(label => {
console.log(label, options )
return options.legendMapping[label]
}): chartLabels;

chart.update();
};
Expand All @@ -389,10 +414,15 @@
if (a !== "unknown" && b === "unknown") {
return -1;
}
// Convert values to numbers for numeric comparison
const numA = parseInt(a, 10);
const numB = parseInt(b, 10);
return numA - numB;
// Convert numeric values to numbers for comparison
if(!isNaN(a) && !isNaN(b)) {
a = parseInt(a, 10);
b = parseInt(b, 10);
}

return a > b ? 1 : -1;


};

/**
Expand Down Expand Up @@ -426,7 +456,10 @@
name: `${label}`,
value: {
min: parseInt(label),
max: parseInt(label) + groupRange - 1,
max:
parseInt(label) +
groupRange -
1,
},
queryBindId: uuidv4(),
},
Expand Down Expand Up @@ -477,7 +510,7 @@
<div part="chart-wrapper">
<h4 part="chart-title">{title}</h4>
{#if options.hintText}
<InfoButtonComponent message={options.hintText}/>
<InfoButtonComponent message={options.hintText} />
{/if}
<canvas
part="chart-canvas"
Expand Down
Loading