autoql-fe-utils 1.0.28 → 1.0.30

package/dist/index.d.ts

@@ -753,7 +753,7 @@ declare const getSVGBase64: (svgElement: any) => string;
  * @param {string} [fill] optionally backgrund canvas fill
  * @return {Promise} a promise to the bas64 png image
  */
-declare const svgToPng: (svgElement: SVGElement, scale?: number) => Promise<unknown>;
+declare const svgToPng: (svgElement: SVGElement, scale: number, CSS_PREFIX: string) => Promise<string>;
 declare const getBBoxFromRef: (ref: any) => any;
 
 interface getSupportedDisplayTypesParams {

package/dist/index.global.js

@@ -17325,6 +17325,260 @@
     return parseFloat(nearestLog10.toPrecision(1));
   };
 
+  // src/theme/Themes.ts
+  var LIGHT_THEME = {
+    "accent-color": "#28A8E0",
+    "accent-color-secondary": "#1EA0D8",
+    "background-color-primary": "#F8F8F8",
+    "background-color-secondary": "#FFFFFF",
+    "background-color-tertiary": "#E8E8E8",
+    "background-color-switch-input": "#BABABA",
+    "background-color-switch-thumb": "#FFFFFF",
+    "background-color-disabled": "#EDEDED",
+    "background-color-disabled-dark": "#857D83",
+    "background-color-checkbox": "#FFFFFF",
+    "border-color": "#D8D8D8",
+    "table-border-color": "#EFEFEF",
+    "hover-color": "#F6F7F9",
+    "text-color-primary": "#343434",
+    "text-color-secondary": "#8b8b8b",
+    "text-color-accent": "#FFFFFF",
+    "text-color-placeholder": "#0000004D",
+    "dashboard-title-color": "#28A8E0",
+    "font-family": "'Roboto', sans-serif",
+    "font-size": "15px",
+    "chart-font-size": "12px",
+    "highlight-color": "#000000",
+    "badge-color": "#F5222D",
+    "danger-color": "#CA0B00",
+    "warning-color": "#FFB600",
+    "success-color": "#47b84c",
+    "info-color": "#28A8E0",
+    "box-shadow-color": "#85858528",
+    "mask-color": "#0000000F",
+    "mobile-mask-color": "#00000059",
+    "scrollbar-color": "#aeaeae",
+    "box-shadow-1": "0px 1px 2px 1px var(--react-autoql-box-shadow-color)",
+    "box-shadow-2": "0px 1px 2px 0px var(--react-autoql-box-shadow-color)"
+  };
+  var DARK_THEME = {
+    "accent-color": "#193a48",
+    "accent-color-secondary": "#1ea0d8",
+    "background-color-primary": "#20252A",
+    "background-color-secondary": "#3B3F46",
+    "background-color-tertiary": "#292929",
+    "background-color-switch-input": "#252525",
+    "background-color-switch-thumb": "#ececec",
+    "background-color-checkbox": "#292929",
+    "background-color-disabled": "#5d6167",
+    "background-color-disabled-dark": "#857d83",
+    "table-border-color": "#53565c",
+    "border-color": "#53565c",
+    "hover-color": "#4a4f56",
+    "text-color-primary": "#ececec",
+    "text-color-secondary": "#bababa",
+    "text-color-accent": "#ffffff",
+    "text-color-placeholder": "#ffffff6e",
+    "dashboard-title-color": "#193a48",
+    "font-family": "'Roboto', sans-serif",
+    "font-size": "12px",
+    "chart-font-size": "12px",
+    "highlight-color": "#ffffff",
+    "badge-color": "#f5222d",
+    "danger-color": "#ff584e",
+    "warning-color": "#ffcc00",
+    "success-color": "#47b84c",
+    "info-color": "#28a8e0",
+    "box-shadow-color": "#00000066",
+    "mask-color": "#00000021",
+    "mobile-mask-color": "#00000059",
+    "scrollbar-color": "#727477",
+    "box-shadow-1": "0px 1px 1px 0px var(--react-autoql-box-shadow-color)",
+    "box-shadow-2": "0px 1px 2px 0px var(--react-autoql-box-shadow-color)"
+  };
+
+  // src/theme/configureTheme.ts
+  var ThemeType = /* @__PURE__ */ ((ThemeType2) => {
+    ThemeType2["LIGHT"] = "light";
+    ThemeType2["DARK"] = "dark";
+    return ThemeType2;
+  })(ThemeType || {});
+  var defaultThemeConfig = {
+    theme: "light" /* LIGHT */,
+    chartColors: ["#26A7E9", "#A5CD39", "#DD6A6A", "#FFA700", "#00C1B2"],
+    accentColor: "#26A7E9",
+    fontFamily: "sans-serif",
+    textColor: void 0,
+    textColorSecondary: void 0,
+    accentTextColor: void 0,
+    dashboardTitleColor: void 0,
+    backgroundColorPrimary: void 0,
+    backgroundColorSecondary: void 0
+  };
+  var getThemeConfig = (customThemeConfig = {}) => {
+    return {
+      ...defaultThemeConfig,
+      ...customThemeConfig
+    };
+  };
+  var getRBGFromHex = (hex2) => {
+    let color3 = hex2;
+    if (color3.slice(0, 1) === "#") {
+      color3 = color3.slice(1);
+    }
+    if (color3.length === 3) {
+      color3 = color3.split("").map((col) => col + col).join("");
+    }
+    const r = parseInt(color3.substr(0, 2), 16);
+    const g = parseInt(color3.substr(2, 2), 16);
+    const b = parseInt(color3.substr(4, 2), 16);
+    return { r, g, b };
+  };
+  var getYIQFromHex = (hex2) => {
+    const { r, g, b } = getRBGFromHex(hex2);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
+    return yiq;
+  };
+  var lightenDarkenColor = (col, amt) => {
+    let usePound = false;
+    if (col[0] == "#") {
+      col = col.slice(1);
+      usePound = true;
+    }
+    const num = parseInt(col, 16);
+    let r = (num >> 16) + amt;
+    if (r > 255)
+      r = 255;
+    else if (r < 0)
+      r = 0;
+    let b = (num >> 8 & 255) + amt;
+    if (b > 255)
+      b = 255;
+    else if (b < 0)
+      b = 0;
+    let g = (num & 255) + amt;
+    if (g > 255)
+      g = 255;
+    else if (g < 0)
+      g = 0;
+    const string = "000000" + (g | b << 8 | r << 16).toString(16);
+    return (usePound ? "#" : "") + string.substring(string.length - 6);
+  };
+  var getThemeValue = (property, prefix2 = "react-autoql") => {
+    return document.documentElement.style.getPropertyValue(`--${prefix2}-${property}`);
+  };
+  var getThemeType = () => {
+    try {
+      const primaryTextColor = getThemeValue("text-color-primary");
+      const textColorYIQ = getYIQFromHex(primaryTextColor);
+      const themeType = textColorYIQ >= 140 ? "light" /* LIGHT */ : "dark" /* DARK */;
+      return themeType;
+    } catch (error) {
+      console.error(error);
+      return "light" /* LIGHT */;
+    }
+  };
+  var getChartColorVars = (prefix2) => {
+    var _a, _b, _c;
+    try {
+      const chartColors = [];
+      const chartColorsDark = [];
+      const maxLoops = 100;
+      let counter = 0;
+      while (counter < maxLoops) {
+        try {
+          const chartColor = getThemeValue(`chart-color-${counter}`, prefix2);
+          const chartColorDark = (_a = getThemeValue(`chart-color-dark-${counter}`, prefix2)) != null ? _a : chartColor;
+          if (chartColor) {
+            chartColors.push(chartColor);
+            chartColorsDark.push(chartColorDark);
+          } else {
+            return { chartColors, chartColorsDark };
+          }
+        } catch (error) {
+        }
+        counter += 1;
+      }
+      return { chartColors, chartColorsDark };
+    } catch (error) {
+      console.error("Could not get chart color css vars. See below for error details");
+      console.error(error);
+      return { chartColors: (_b = defaultThemeConfig.chartColors) != null ? _b : [], chartColorsDark: (_c = defaultThemeConfig.chartColors) != null ? _c : [] };
+    }
+  };
+  var setAccentColorVars = (accentColor, themeStyles) => {
+    const accentColorYIQ = getYIQFromHex(accentColor);
+    themeStyles["text-color-accent"] = accentColorYIQ >= 140 ? "black" : "white";
+  };
+  var setChartColors = (providedChartColors, themeStyles) => {
+    const chartColors = providedChartColors || defaultThemeConfig.chartColors;
+    if (!Array.isArray(chartColors)) {
+      console.error("configureTheme chartColors option must be an array");
+      return;
+    } else if (!chartColors.length) {
+      console.error(
+        "configureTheme chartColors option must not be empty. If you meant to use the default colors, do not supply a chart colors array"
+      );
+      return;
+    }
+    chartColors.forEach((color3, i) => {
+      themeStyles[`chart-color-${i}`] = color3;
+      const darkerColor = lightenDarkenColor(color3, -50);
+      themeStyles[`chart-color-dark-${i}`] = darkerColor;
+    });
+  };
+  var configureTheme = (customThemeConfig = {}, prefix2 = "react-autoql") => {
+    const {
+      theme,
+      textColor,
+      fontFamily,
+      chartColors,
+      accentColor,
+      accentTextColor,
+      textColorSecondary,
+      dashboardTitleColor,
+      backgroundColorPrimary,
+      backgroundColorSecondary
+    } = getThemeConfig(customThemeConfig);
+    const themeStyles = theme === "light" ? LIGHT_THEME : DARK_THEME;
+    if (textColor) {
+      themeStyles["text-color-primary"] = textColor;
+    }
+    if (textColorSecondary) {
+      themeStyles["text-color-secondary"] = textColorSecondary;
+    }
+    if (accentTextColor) {
+      themeStyles["text-color-accent"] = accentTextColor;
+    } else {
+      setAccentColorVars(accentColor, themeStyles);
+    }
+    if (fontFamily) {
+      themeStyles["font-family"] = fontFamily;
+    }
+    if (accentColor) {
+      themeStyles["accent-color"] = accentColor;
+    }
+    themeStyles["dashboard-title-color"] = dashboardTitleColor || themeStyles["accent-color"];
+    if (backgroundColorPrimary) {
+      themeStyles["background-color-primary"] = backgroundColorPrimary;
+    }
+    if (backgroundColorSecondary) {
+      themeStyles["background-color-secondary"] = backgroundColorSecondary;
+    }
+    setChartColors(chartColors, themeStyles);
+    for (const property in themeStyles) {
+      document.documentElement.style.setProperty(`--${prefix2}-${property}`, themeStyles[property]);
+    }
+    try {
+      const { r, g, b } = getRBGFromHex(themeStyles["accent-color"]);
+      document.documentElement.style.setProperty(`--${prefix2}-accent-color-R`, `${r}`);
+      document.documentElement.style.setProperty(`--${prefix2}-accent-color-G`, `${g}`);
+      document.documentElement.style.setProperty(`--${prefix2}-accent-color-B`, `${b}`);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   // node_modules/d3-selection/src/namespaces.js
   var xhtml = "http://www.w3.org/1999/xhtml";
   var namespaces_default = {
@@ -18283,7 +18537,7 @@
       return void 0;
     }
   };
-  var svgToPng = (svgElement, scale = 3) => {
+  var svgToPng = (svgElement, scale = 3, CSS_PREFIX) => {
     return new Promise(function(resolve, reject) {
       var _a, _b, _c, _d;
       try {
@@ -18297,7 +18551,10 @@
         const scaledWidth = originalWidth * scale;
         const scaledHeight = originalHeight * scale;
         const clonedSvg = svgElement.cloneNode(true);
-        select_default2(clonedSvg).attr("width", originalWidth).attr("height", originalHeight).attr("viewBox", `0 0 ${originalWidth} ${originalHeight}`).attr("preserveAspectRatio", "xMinYMin meet");
+        const chartFontFamily = getThemeValue("font-family", CSS_PREFIX);
+        const chartTextColor = getThemeValue("text-color-primary", CSS_PREFIX);
+        const chartBackgroundColor = getThemeValue("background-color-secondary", CSS_PREFIX);
+        select_default2(clonedSvg).attr("width", originalWidth).attr("height", originalHeight).attr("viewBox", `0 0 ${originalWidth} ${originalHeight}`).attr("preserveAspectRatio", "xMinYMin meet").style("font-family", chartFontFamily).style("color", chartTextColor).style("background", chartBackgroundColor);
         const image64 = getSVGBase64(clonedSvg);
         const canvas = document.createElement("canvas");
         canvas.width = scaledWidth + 2 * scaledMargin;
@@ -18310,7 +18567,7 @@
           if (!ctx) {
             return;
           }
-          ctx.fillStyle = svgElement.style.background;
+          ctx.fillStyle = chartBackgroundColor;
           ctx.fillRect(0, 0, canvas.width, canvas.height);
           ctx.drawImage(this, scaledMargin, scaledMargin, scaledWidth, scaledHeight);
           resolve(canvas.toDataURL("image/png"));
@@ -21292,260 +21549,6 @@
     return entries;
   }
 
-  // src/theme/Themes.ts
-  var LIGHT_THEME = {
-    "accent-color": "#28A8E0",
-    "accent-color-secondary": "#1EA0D8",
-    "background-color-primary": "#F8F8F8",
-    "background-color-secondary": "#FFFFFF",
-    "background-color-tertiary": "#E8E8E8",
-    "background-color-switch-input": "#BABABA",
-    "background-color-switch-thumb": "#FFFFFF",
-    "background-color-disabled": "#EDEDED",
-    "background-color-disabled-dark": "#857D83",
-    "background-color-checkbox": "#FFFFFF",
-    "border-color": "#D8D8D8",
-    "table-border-color": "#EFEFEF",
-    "hover-color": "#F6F7F9",
-    "text-color-primary": "#343434",
-    "text-color-secondary": "#8b8b8b",
-    "text-color-accent": "#FFFFFF",
-    "text-color-placeholder": "#0000004D",
-    "dashboard-title-color": "#28A8E0",
-    "font-family": "'Roboto', sans-serif",
-    "font-size": "15px",
-    "chart-font-size": "12px",
-    "highlight-color": "#000000",
-    "badge-color": "#F5222D",
-    "danger-color": "#CA0B00",
-    "warning-color": "#FFB600",
-    "success-color": "#47b84c",
-    "info-color": "#28A8E0",
-    "box-shadow-color": "#85858528",
-    "mask-color": "#0000000F",
-    "mobile-mask-color": "#00000059",
-    "scrollbar-color": "#aeaeae",
-    "box-shadow-1": "0px 1px 2px 1px var(--react-autoql-box-shadow-color)",
-    "box-shadow-2": "0px 1px 2px 0px var(--react-autoql-box-shadow-color)"
-  };
-  var DARK_THEME = {
-    "accent-color": "#193a48",
-    "accent-color-secondary": "#1ea0d8",
-    "background-color-primary": "#20252A",
-    "background-color-secondary": "#3B3F46",
-    "background-color-tertiary": "#292929",
-    "background-color-switch-input": "#252525",
-    "background-color-switch-thumb": "#ececec",
-    "background-color-checkbox": "#292929",
-    "background-color-disabled": "#5d6167",
-    "background-color-disabled-dark": "#857d83",
-    "table-border-color": "#53565c",
-    "border-color": "#53565c",
-    "hover-color": "#4a4f56",
-    "text-color-primary": "#ececec",
-    "text-color-secondary": "#bababa",
-    "text-color-accent": "#ffffff",
-    "text-color-placeholder": "#ffffff6e",
-    "dashboard-title-color": "#193a48",
-    "font-family": "'Roboto', sans-serif",
-    "font-size": "12px",
-    "chart-font-size": "12px",
-    "highlight-color": "#ffffff",
-    "badge-color": "#f5222d",
-    "danger-color": "#ff584e",
-    "warning-color": "#ffcc00",
-    "success-color": "#47b84c",
-    "info-color": "#28a8e0",
-    "box-shadow-color": "#00000066",
-    "mask-color": "#00000021",
-    "mobile-mask-color": "#00000059",
-    "scrollbar-color": "#727477",
-    "box-shadow-1": "0px 1px 1px 0px var(--react-autoql-box-shadow-color)",
-    "box-shadow-2": "0px 1px 2px 0px var(--react-autoql-box-shadow-color)"
-  };
-
-  // src/theme/configureTheme.ts
-  var ThemeType = /* @__PURE__ */ ((ThemeType2) => {
-    ThemeType2["LIGHT"] = "light";
-    ThemeType2["DARK"] = "dark";
-    return ThemeType2;
-  })(ThemeType || {});
-  var defaultThemeConfig = {
-    theme: "light" /* LIGHT */,
-    chartColors: ["#26A7E9", "#A5CD39", "#DD6A6A", "#FFA700", "#00C1B2"],
-    accentColor: "#26A7E9",
-    fontFamily: "sans-serif",
-    textColor: void 0,
-    textColorSecondary: void 0,
-    accentTextColor: void 0,
-    dashboardTitleColor: void 0,
-    backgroundColorPrimary: void 0,
-    backgroundColorSecondary: void 0
-  };
-  var getThemeConfig = (customThemeConfig = {}) => {
-    return {
-      ...defaultThemeConfig,
-      ...customThemeConfig
-    };
-  };
-  var getRBGFromHex = (hex2) => {
-    let color3 = hex2;
-    if (color3.slice(0, 1) === "#") {
-      color3 = color3.slice(1);
-    }
-    if (color3.length === 3) {
-      color3 = color3.split("").map((col) => col + col).join("");
-    }
-    const r = parseInt(color3.substr(0, 2), 16);
-    const g = parseInt(color3.substr(2, 2), 16);
-    const b = parseInt(color3.substr(4, 2), 16);
-    return { r, g, b };
-  };
-  var getYIQFromHex = (hex2) => {
-    const { r, g, b } = getRBGFromHex(hex2);
-    const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
-    return yiq;
-  };
-  var lightenDarkenColor = (col, amt) => {
-    let usePound = false;
-    if (col[0] == "#") {
-      col = col.slice(1);
-      usePound = true;
-    }
-    const num = parseInt(col, 16);
-    let r = (num >> 16) + amt;
-    if (r > 255)
-      r = 255;
-    else if (r < 0)
-      r = 0;
-    let b = (num >> 8 & 255) + amt;
-    if (b > 255)
-      b = 255;
-    else if (b < 0)
-      b = 0;
-    let g = (num & 255) + amt;
-    if (g > 255)
-      g = 255;
-    else if (g < 0)
-      g = 0;
-    const string = "000000" + (g | b << 8 | r << 16).toString(16);
-    return (usePound ? "#" : "") + string.substring(string.length - 6);
-  };
-  var getThemeValue = (property, prefix2 = "react-autoql") => {
-    return document.documentElement.style.getPropertyValue(`--${prefix2}-${property}`);
-  };
-  var getThemeType = () => {
-    try {
-      const primaryTextColor = getThemeValue("text-color-primary");
-      const textColorYIQ = getYIQFromHex(primaryTextColor);
-      const themeType = textColorYIQ >= 140 ? "light" /* LIGHT */ : "dark" /* DARK */;
-      return themeType;
-    } catch (error) {
-      console.error(error);
-      return "light" /* LIGHT */;
-    }
-  };
-  var getChartColorVars = (prefix2) => {
-    var _a, _b, _c;
-    try {
-      const chartColors = [];
-      const chartColorsDark = [];
-      const maxLoops = 100;
-      let counter = 0;
-      while (counter < maxLoops) {
-        try {
-          const chartColor = getThemeValue(`chart-color-${counter}`, prefix2);
-          const chartColorDark = (_a = getThemeValue(`chart-color-dark-${counter}`, prefix2)) != null ? _a : chartColor;
-          if (chartColor) {
-            chartColors.push(chartColor);
-            chartColorsDark.push(chartColorDark);
-          } else {
-            return { chartColors, chartColorsDark };
-          }
-        } catch (error) {
-        }
-        counter += 1;
-      }
-      return { chartColors, chartColorsDark };
-    } catch (error) {
-      console.error("Could not get chart color css vars. See below for error details");
-      console.error(error);
-      return { chartColors: (_b = defaultThemeConfig.chartColors) != null ? _b : [], chartColorsDark: (_c = defaultThemeConfig.chartColors) != null ? _c : [] };
-    }
-  };
-  var setAccentColorVars = (accentColor, themeStyles) => {
-    const accentColorYIQ = getYIQFromHex(accentColor);
-    themeStyles["text-color-accent"] = accentColorYIQ >= 140 ? "black" : "white";
-  };
-  var setChartColors = (providedChartColors, themeStyles) => {
-    const chartColors = providedChartColors || defaultThemeConfig.chartColors;
-    if (!Array.isArray(chartColors)) {
-      console.error("configureTheme chartColors option must be an array");
-      return;
-    } else if (!chartColors.length) {
-      console.error(
-        "configureTheme chartColors option must not be empty. If you meant to use the default colors, do not supply a chart colors array"
-      );
-      return;
-    }
-    chartColors.forEach((color3, i) => {
-      themeStyles[`chart-color-${i}`] = color3;
-      const darkerColor = lightenDarkenColor(color3, -50);
-      themeStyles[`chart-color-dark-${i}`] = darkerColor;
-    });
-  };
-  var configureTheme = (customThemeConfig = {}, prefix2 = "react-autoql") => {
-    const {
-      theme,
-      textColor,
-      fontFamily,
-      chartColors,
-      accentColor,
-      accentTextColor,
-      textColorSecondary,
-      dashboardTitleColor,
-      backgroundColorPrimary,
-      backgroundColorSecondary
-    } = getThemeConfig(customThemeConfig);
-    const themeStyles = theme === "light" ? LIGHT_THEME : DARK_THEME;
-    if (textColor) {
-      themeStyles["text-color-primary"] = textColor;
-    }
-    if (textColorSecondary) {
-      themeStyles["text-color-secondary"] = textColorSecondary;
-    }
-    if (accentTextColor) {
-      themeStyles["text-color-accent"] = accentTextColor;
-    } else {
-      setAccentColorVars(accentColor, themeStyles);
-    }
-    if (fontFamily) {
-      themeStyles["font-family"] = fontFamily;
-    }
-    if (accentColor) {
-      themeStyles["accent-color"] = accentColor;
-    }
-    themeStyles["dashboard-title-color"] = dashboardTitleColor || themeStyles["accent-color"];
-    if (backgroundColorPrimary) {
-      themeStyles["background-color-primary"] = backgroundColorPrimary;
-    }
-    if (backgroundColorSecondary) {
-      themeStyles["background-color-secondary"] = backgroundColorSecondary;
-    }
-    setChartColors(chartColors, themeStyles);
-    for (const property in themeStyles) {
-      document.documentElement.style.setProperty(`--${prefix2}-${property}`, themeStyles[property]);
-    }
-    try {
-      const { r, g, b } = getRBGFromHex(themeStyles["accent-color"]);
-      document.documentElement.style.setProperty(`--${prefix2}-accent-color-R`, `${r}`);
-      document.documentElement.style.setProperty(`--${prefix2}-accent-color-G`, `${g}`);
-      document.documentElement.style.setProperty(`--${prefix2}-accent-color-B`, `${b}`);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
   // src/Charts/chartHelpers.ts
   var DEFAULT_INNER_PADDING = 0.2;
   var DEFAULT_OUTER_PADDING = 0.5;
@@ -21703,7 +21706,7 @@
       const column1 = columns[colIndex];
       const column2 = columns[colIndex2];
       if (!!legendColumn && !!(column1 == null ? void 0 : column1.origColumn)) {
-        tooltipLine1 = `<div><strong>${legendColumn.display_name}:</strong> ${column1.display_name}</div>`;
+        tooltipLine1 = `<div><strong>${legendColumn.display_name}:</strong> ${column1.title}</div>`;
       }
       if (column1) {
         let column1Title = column1.origColumn ? column1.origColumn.display_name : column1.display_name;