@emuanalytics/flow-rdf-ui 4.1.0-preview.12 → 4.1.0-preview.14

package/dist/components/chart/chart.component.mjs

@@ -1,10 +1,12 @@
 import { Chart } from 'chart.js';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './chart.styles.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { isStringFull } from '../../internal/type-checks.mjs';
 import { initializeChartJs } from './chartjs-support.mjs';
 
 var __defProp = Object.defineProperty;
@@ -21,7 +23,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 class FlowUiChart extends FlowRdfElement {
   constructor() {
     super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "label");
     this._chartRef = createRef();
+    this.label = "";
     this.plugins = [];
   }
   /** The Chart.js chart instance. */
@@ -54,14 +58,26 @@ class FlowUiChart extends FlowRdfElement {
     }
   }
   render() {
+    const hasHeader = isStringFull(this.label) || this.hasSlotController.test("label");
     return html`
       <div part="base" class="chart">
-        <canvas ${ref(this._chartRef)}></canvas>
+        ${hasHeader ? html`
+              <header part="header" class="chart__header">
+                <span part="label" class="chart__label"><slot name="label">${this.label}</slot></span>
+              </header>
+            ` : nothing}
+
+        <div class="chart_container">
+          <canvas ${ref(this._chartRef)}></canvas>
+        </div>
       </div>
     `;
   }
 }
 FlowUiChart.styles = styles;
+__decorateClass([
+  property()
+], FlowUiChart.prototype, "label", 2);
 __decorateClass([
   property()
 ], FlowUiChart.prototype, "type", 2);

package/dist/components/chart/chart.styles.mjs

@@ -66,14 +66,33 @@ const styles = css`
 
     --dataset-stroke-color-9: var(--flow-ui-chart-stroke-color-9, hsl(292.1 88.4% 57.7%));
     --dataset-fill-color-9: var(--flow-ui-chart-fill-color-9, hsl(292.1 88.4% 57.7%));
+
+    --header-padding: var(--flow-ui-chart-header-padding, var(--flow-ui-spacing-x-small));
+    --header-height: var(--flow-ui-chart-header-height, var(--flow-ui-control-height-medium));
+    --header-font-size: var(--flow-ui-chart-header-font-size, var(--flow-ui-font-size-medium));
+    --header-color: var(--flow-ui-chart-header-color, var(--flow-ui-color-text));
   }
 
   .chart {
+    height: 100%;
     background-color: var(--background-color);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .chart__header {
+    flex: 0 0 auto;
+    padding: var(--header-padding);
+    height: var(--header-height);
+    font-size: var(--header-font-size);
+    color: var(--header-color);
+  }
+
+  .chart_container {
+    flex: 1;
     position: relative;
     width: 100%;
     height: 100%;
-    /* padding: var(--flow-ui-spacing-x-small); */
   }
 `;
 

package/dist/components/query-builder/helpers.mjs

@@ -35,8 +35,22 @@ function transformRuleSet(ruleSet, transformFn, clone = true) {
   }).filter(isRuleOrRuleset);
   return ruleSet;
 }
+function countRuleSet(ruleset) {
+  const activeFilters = (ruleSet) => {
+    let count = 0;
+    for (const rule of ruleSet.rules) {
+      if (isRule(rule) && rule.field && rule.enabled) {
+        count += 1;
+      } else if (isRuleSet(rule)) {
+        count += activeFilters(rule);
+      }
+    }
+    return count;
+  };
+  return activeFilters(ruleset);
+}
 const isRule = (r) => isObjectFull(r) && "field" in r;
 const isRuleSet = (r) => isObjectFull(r) && "rules" in r;
 const isRuleOrRuleset = (r) => isRule(r) || isRuleSet(r);
 
-export { filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };
+export { countRuleSet, filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };