patterns work

AliceO2Group · Oct 12, 2024 · 38870ea · 38870ea
1 parent 8759e27
commit 38870ea
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 29 deletions.
diff --git a/lib/public/components/common/chart/rendering/dataset/renderDatasetAsBars.js b/lib/public/components/common/chart/rendering/dataset/renderDatasetAsBars.js
@@ -34,7 +34,7 @@ export const renderDatasetAsBars = (
     barPropertiesProvider,
     configuration,
 ) => {
-    const { fill, stroke } = configuration;
+    const { fill, stroke, pattern } = configuration;
 
     /**
      * Get bar fill
@@ -52,15 +52,53 @@ export const renderDatasetAsBars = (
 
     const { getWidth, getHeight, getX, getY } = barPropertiesProvider;
 
+    // // Define the pattern in the <defs> section
+    const defs = select(svg).append('defs');
+    defs.append('pattern')
+        .attr('id', 'diagonalStripes') // Give the pattern an ID
+        .attr('width', 10) // Width of the pattern
+        .attr('height', 10) // Height of the pattern
+        .attr('patternUnits', 'userSpaceOnUse') // Makes the pattern scalable
+        .append('path') // Define the pattern content
+        .attr('d', 'M 0,10 L 10,0') // Diagonal stripe
+        .attr('stroke', 'red')
+        .attr('stroke-width', 2);
+
+    // select(svg)
+    //     .append('g')
+    //     .selectAll('rect')
+    //     .data(bars)
+    //     .join('rect')
+    //     .attr('width', getWidth)
+    //     .attr('height', getHeight)
+    //     .attr('x', getX)
+    //     .attr('y', getY)
+    //     .attr('fill', getFill)
+    //     .attr('stroke', getStroke);
+
     select(svg)
         .append('g')
         .selectAll('rect')
         .data(bars)
-        .join('rect')
-        .attr('width', getWidth)
-        .attr('height', getHeight)
-        .attr('x', getX)
-        .attr('y', getY)
-        .attr('fill', getFill)
-        .attr('stroke', getStroke);
+        .enter()
+        .append('g')
+        .each(function (d) {
+            select(this).append('rect')
+                .attr('width', getWidth)
+                .attr('height', getHeight)
+                .attr('x', getX)
+                .attr('y', getY)
+                .attr('fill', getFill)
+                .attr('stroke', getStroke);
+
+            if (d.pattern) {
+                select(this).append('rect')
+                    .attr('width', getWidth)
+                    .attr('height', getHeight)
+                    .attr('x', getX)
+                    .attr('y', getY)
+                    .attr('fill', 'url(#diagonalStripes)')
+                    .attr('stroke', 'none');
+            }
+        });
 };
diff --git a/lib/public/components/common/chart/structures/BarPropertiesProvider.js b/lib/public/components/common/chart/structures/BarPropertiesProvider.js
@@ -19,9 +19,8 @@
 
 /**
  * @typedef BarPropertiesProvider
- * @type {VisualPropertiesProvider}
  * @property {BarToProperty} getX function to extract the horizontal coordinate of a given bar
  * @property {BarToProperty} getY function to extract the vertical coordinate of a given bar
- * @property {BarToProperty} getLength function to extract the length (size along dependent variable axis) of a given bar
- * @property {BarToProperty} getWidth function to extract the width (size along independent variable axis) of a given bar
+ * @property {BarToProperty} getLength function to extract the length (size along  y-axis) of a given bar
+ * @property {BarToProperty} getWidth function to extract the width (size along x-axis) of a given bar
  */
diff --git a/lib/public/components/common/chart/structures/VisualPropertiesProvider.js b/lib/public/components/common/chart/structures/VisualPropertiesProvider.js
diff --git a/lib/public/views/QcFlags/qcFlagsVisualization/qcFlagsChartComponent.js b/lib/public/views/QcFlags/qcFlagsVisualization/qcFlagsChartComponent.js
@@ -28,6 +28,7 @@ export const qcFlagsChartComponent = (flags, run) => barChartComponent(
         y: `${flag.flagType.name} (id:${flag.id})`,
         x: [flag.from, flag.to],
         fill: flag.flagType.color,
+        pattern: 'diagonalStripes',
     })),
     {
         placeholder: 'No data',