💾 Iobio Charts @19 (#39)

* Update iobio-charts * Convert title to label * First updates for v18 * Updated to v19 * Update Colors for Percent Boxes * Improved Style Selector * Alphabetize histogram props
overture-stack · Aug 2, 2024 · 6bfff38 · 6bfff38
1 parent a397bec
commit 6bfff38
Show file tree

Hide file tree

Showing 8 changed files with 3,969 additions and 22 deletions.
diff --git a/apps/bam.iobio/src/App.tsx b/apps/bam.iobio/src/App.tsx
@@ -29,7 +29,8 @@ import { defaultBamContext, histogramKeys, iobioURL, isOutlierKey, percentKeys }
 const { IobioCoverageDepth, IobioDataBroker, IobioHistogram, IobioPercentBox, BamDisplayNames, BamKeys } =
 	IobioComponents;
 
-const colors = ['red', 'orange', 'gold', 'aquamarine', 'cornflowerblue'];
+const colors = ['red', 'orange', 'gold', 'aquamarine', 'cornflowerblue', 'purple'];
+const secondaryColors = ['lightpink', 'peachpuff', 'lemonchiffon', 'palegreen', 'powderblue', 'lavender'];
 
 const bamConfigPanel = (bamContext: BamContext, updateContext: (key: BamKey, value: boolean) => void) => (
 	<div style={{ margin: '15px' }}>
@@ -117,17 +118,28 @@ function App() {
 						{/* Percent Boxes */}
 						<div className="row iobio-container">
 							{percentKeys.map(
-								(key) =>
+								(key, index) =>
 									bamContext[key] && (
-										<IobioPercentBox title={BamDisplayNames[key]} percentKey={key} totalKey="total_reads" key={key} />
+										<IobioPercentBox
+											label={BamDisplayNames[key]}
+											percentKey={key}
+											styles={`
+											:host {
+												--iobio-data-color: ${colors[index]};
+												--iobio-data-color-secondary: ${secondaryColors[index]};
+											}
+											`}
+											totalKey="total_reads"
+											key={key}
+										/>
 									),
 							)}
 						</div>
 
 						{/* Coverage Depth */}
 						{bamContext.coverage_depth && (
 							<div className="row iobio-chart-container">
-								<IobioCoverageDepth />
+								<IobioCoverageDepth label="Read Coverage" />
 							</div>
 						)}
 						{/* Histograms */}
@@ -138,7 +150,7 @@ function App() {
 										<IobioHistogram
 											key={key}
 											brokerKey={key}
-											title={BamDisplayNames[key]}
+											label={BamDisplayNames[key]}
 											styles={`
 												.iobio-histogram-title { text-align: left;} 
 												:host {