Merge pull request #196 from hatemhosny/labelsPosition-none

LabelsPosition-none
hatemhosny · Sep 6, 2024 · b01eeac · b01eeac
2 parents 9d47d7a + 1d851d9
commit b01eeac
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 15 deletions.
diff --git a/src/lib/css/styles.css b/src/lib/css/styles.css
@@ -40,6 +40,10 @@ __selector__ text.label {
   font-weight: 600;
 }
 
+__selector__ text.label.hidden {
+  visibility: hidden;
+}
+
 __selector__ text.valueLabel {
   font-weight: 300;
 }

diff --git a/src/lib/options/options.models.ts b/src/lib/options/options.models.ts
@@ -11,7 +11,7 @@ export interface Options {
   dataTransform: null | ((data: Data[] | WideData[]) => Data[] | WideData[]);
   fillDateGapsInterval: null | 'year' | 'month' | 'day';
   fillDateGapsValue: 'last' | 'interpolate';
-  labelsPosition: 'inside' | 'outside';
+  labelsPosition: 'inside' | 'outside' | 'none';
   controlButtons: 'all' | 'play' | 'none';
   overlays: 'all' | 'play' | 'repeat' | 'none';
 

diff --git a/src/lib/options/validate-options.ts b/src/lib/options/validate-options.ts
@@ -38,7 +38,7 @@ const strOrFuncOpts = ['title', 'subTitle', 'dateCounter', 'caption'] as const s
 
 const validDataShapes: Array<Options['dataShape']> = ['long', 'wide', 'auto'];
 const validDataTypes: Array<Options['dataType']> = ['json', 'csv', 'tsv', 'xml', 'auto'];
-const validLabelsPositions: Array<Options['labelsPosition']> = ['inside', 'outside'];
+const validLabelsPositions: Array<Options['labelsPosition']> = ['inside', 'outside', 'none'];
 const validControlButtons: Array<Options['controlButtons']> = ['all', 'play', 'none'];
 const validOverlays: Array<Options['overlays']> = ['all', 'play', 'repeat', 'none'];
 const validFillDateGapsIntervals: Array<Options['fillDateGapsInterval']> = [

diff --git a/src/lib/renderer/calculate-dimensions.ts b/src/lib/renderer/calculate-dimensions.ts
@@ -43,7 +43,7 @@ export function calculateDimensions(store: Store, renderOptions: RenderOptions)
     10,
   );
 
-  const labelsArea = labelsPosition === 'inside' ? 0 : labelsWidth;
+  const labelsArea = labelsPosition !== 'outside' ? 0 : labelsWidth;
   const topAxisPadding = 15;
 
   const margin = {
@@ -73,7 +73,7 @@ export function calculateDimensions(store: Store, renderOptions: RenderOptions)
   const iconSize = (renderOptions.iconSize = showIcons ? barHeight * 0.9 : 0);
   const iconSpace = (renderOptions.iconSpace = showIcons ? iconSize + labelPadding : 0);
   renderOptions.labelX =
-    labelsPosition === 'inside'
+    labelsPosition !== 'outside'
       ? (d: Data) => x(d.value) - labelPadding - iconSpace
       : margin.left - labelPadding;
 

diff --git a/src/lib/renderer/render-frame.ts b/src/lib/renderer/render-frame.ts
@@ -114,7 +114,8 @@ export function renderFrame(data: Data[], store: Store, renderOptions: RenderOpt
     .enter()
     .append('text')
     .attr('class', 'label')
-    .classed('outside-bars', labelsPosition !== 'inside')
+    .classed('outside-bars', labelsPosition === 'outside')
+    .classed('hidden', labelsPosition === 'none')
     .attr('x', labelX)
     .attr('y', () => y(topN + 1) + marginBottom + 5 + barHalfHeight)
     .style('text-anchor', 'end')
@@ -225,7 +226,7 @@ export function renderFrame(data: Data[], store: Store, renderOptions: RenderOpt
       .duration(tickDuration)
       .ease(d3.easeLinear)
       .attr('cy', (d: Data) => y(d.rank as number) + barHalfHeight)
-      .attr('clip-path', 'url(#icons-rect-clip)');
+      .attr('clip-path', `url(#clipPath-${store.getState().container.element.id})`);
 
     icons
       .transition()

diff --git a/src/lib/renderer/render-initial-view.ts b/src/lib/renderer/render-initial-view.ts
@@ -97,7 +97,8 @@ export function renderInitialView(data: Data[], store: Store, renderOptions: Ren
       .enter()
       .append('text')
       .attr('class', 'label')
-      .classed('outside-bars', labelsPosition !== 'inside')
+      .classed('outside-bars', labelsPosition === 'outside')
+      .classed('hidden', labelsPosition === 'none')
       .attr('x', labelX)
       .attr('y', (d: Data) => barY(d) + barHalfHeight)
       .style('text-anchor', 'end')
@@ -135,10 +136,9 @@ export function renderInitialView(data: Data[], store: Store, renderOptions: Ren
         .attr('x', 0)
         .attr('y', 0);
 
-      // avoid icons overflow outside bars
       svg
         .append('clipPath')
-        .attr('id', 'icons-rect-clip')
+        .attr('id', 'clipPath-' + store.getState().container.element.id)
         .append('rect')
         .attr('x', x(0) + 1)
         .attr('y', margin.top)
@@ -155,7 +155,7 @@ export function renderInitialView(data: Data[], store: Store, renderOptions: Ren
         .attr('r', iconSize / 2)
         .style('fill', 'transparent')
         .style('fill', (d: Data) => `url(#${getIconID(d)})`)
-        .attr('clip-path', 'url(#icons-rect-clip)');
+        .attr('clip-path', `url(#clipPath-${store.getState().container.element.id})`);
     }
 
     const endY = height - margin.bottom;

diff --git a/website/docs/documentation/options.md b/website/docs/documentation/options.md
@@ -516,12 +516,13 @@ See the guide on [`chart controls`](../guides/chart-controls.md) for other alter
 ### labelsPosition
 
 Sets the position of bar labels. If set to `"inside"`, the labels are positioned inside the bars.
-Otherwise, the labels are positioned on the left side of the bars.
+If set to `"outside"`, the labels are positioned on the left side of the bars.
+If set to `"none"`, the labels are not displayed (this can be useful to show icons only - see [example in gallery](../gallery/labels-position.md)).
 
 Note that if this is set to `"inside"` (default),
 bars with small width (low values) may have their labels partially invisible ([demo](../gallery/fixed-scale)).
 
-- Type: `"inside" | "outside"`
+- Type: `"inside" | "outside" | "none"`
 - Default: `"inside"`
 - Example: [view in gallery](../gallery/labels-position.md)
 

diff --git a/website/docs/gallery/_gallery-demos.ts b/website/docs/gallery/_gallery-demos.ts
@@ -368,6 +368,22 @@ export const labelsPosition: ChartProps = {
   labelsPosition: 'outside',
 };
 
+export const labelsPositionNone: ChartProps = {
+  label: 'Labels Position',
+  dataUrl: '/data/population.csv',
+  dataTransform: (data) =>
+    data.map((d) => ({
+      ...d,
+      icon: `https://flagsapi.com/${d.code}/flat/64.png`,
+    })),
+  title: 'World Population',
+  labelsPosition: 'none',
+  showIcons: true,
+  dynamicProps: {
+    dataTransform: `(data) => data.map((d) => ({ ...d, icon: \`https://flagsapi.com/\${d.code}/flat/64.png\` }))`,
+  },
+};
+
 export const loop: ChartProps = {
   label: 'Loop',
   dataUrl: '/data/population.csv',

diff --git a/website/docs/gallery/icons.md b/website/docs/gallery/icons.md
@@ -4,7 +4,7 @@ hide_table_of_contents: true
 ---
 
 import RacingBars from '../../src/components/RacingBars';
-import { icons } from './\_gallery-demos.ts';
+import { icons, labelsPositionNone } from './\_gallery-demos.ts';
 
 A demo showing the use of [icons](../guides/icons.md).
 
@@ -27,3 +27,14 @@ Notice setting [`labelsPosition`](../documentation/options.md#labelsposition) to
 
 You may also use the [`dataTransform`](../documentation/options.md#datatransform) option for data transformation,
 like in [this example](./data-transform.md).
+
+### Show icons only
+
+Bars can have icons only (without labels), by combining the `showIcons: true` option with `labelsPosition: 'none'`.
+
+<div className="gallery">
+  <RacingBars
+    {...labelsPositionNone}
+/>
+
+</div>
diff --git a/website/docs/gallery/labels-position.md b/website/docs/gallery/labels-position.md
@@ -4,7 +4,7 @@ hide_table_of_contents: true
 ---
 
 import RacingBars from '../../src/components/RacingBars';
-import { labelsPosition } from './\_gallery-demos.ts';
+import { labelsPosition, labelsPositionNone } from './\_gallery-demos.ts';
 
 A demo for using [`labelsPosition`](../documentation/options.md#labelsposition).
 
@@ -31,3 +31,14 @@ A demo for using [`labelsPosition`](../documentation/options.md#labelsposition).
 />
 
 </div>
+
+## labelsPosition: 'none'
+
+### Chart
+
+<div className="gallery">
+  <RacingBars
+    {...labelsPositionNone}
+/>
+
+</div>
diff --git a/website/src/components/ChartOptions/index.tsx b/website/src/components/ChartOptions/index.tsx
@@ -49,7 +49,7 @@ async function initPane(racer) {
   pane.addBinding(PARAMS, 'showGroups');
   pane.addBinding(PARAMS, 'topN', { min: 2, max: 15, step: 1 });
   pane.addBinding(PARAMS, 'labelsPosition', {
-    options: { inside: 'inside', outside: 'outside' },
+    options: { inside: 'inside', outside: 'outside', none: 'none' },
   });
   pane.addBinding(PARAMS, 'labelsWidth', { min: 0, max: 300, step: 1 });
   pane.addBinding(PARAMS, 'loop');