feat: chart background (#492)

qlik-oss · Dec 8, 2023 · 9128bcb · 9128bcb
1 parent 4462b96
commit 9128bcb
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 1 deletion.
diff --git a/api-specifications/properties.json b/api-specifications/properties.json
@@ -323,12 +323,83 @@
         },
         "title": {
           "type": "#/definitions/TitleStyling"
+        },
+        "bgColor": {
+          "optional": true,
+          "kind": "union",
+          "items": [
+            {
+              "type": "#/definitions/BackgroundColor"
+            },
+            {
+              "type": "#/definitions/BackgroundColorExpression"
+            }
+          ]
+        },
+        "bgImage": {
+          "optional": true,
+          "type": "#/definitions/BackgroundImage"
         }
       },
       "examples": [
-        "{\n key: \"general\",\n title: {\n   main: {\n     fontSize: \"18px\",\n     fontFamily: \"Arial\",\n     fontStyle: [\"bold\", \"italic\"],\n     color: { color: \"orangered\" },\n   }\n }\n}"
+        "{\n key: \"general\",\n title: {\n   main: {\n     fontSize: \"18px\",\n     fontFamily: \"Arial\",\n     fontStyle: [\"bold\", \"italic\"],\n     color: { color: \"orangered\" },\n   }\n },\n bgColor: {\n   useExpression: true,\n   color: {\n     index: 6,\n     color: \"#006580\"\n   },\n   colorExpression: {\n     qStringExpression: {\n       qExpr: \"red()\"\n     }\n   }\n },\n bgImage: {\n   mode: \"media\",\n   mediaUrl: {\n     qStaticContentUrlDef: {\n       qUrl: \"<path-to-image>\"\n     }\n   }\n }\n}"
       ]
     },
+    "BackgroundColor": {
+      "description": "Chart background color",
+      "kind": "object",
+      "entries": {
+        "color": {
+          "description": "Background color palette",
+          "type": "#/definitions/PaletteColor"
+        }
+      }
+    },
+    "BackgroundColorExpression": {
+      "description": "Chart background color by expression",
+      "kind": "object",
+      "entries": {
+        "useExpression": {
+          "description": "Boolean to indicate if color by expression should be used",
+          "type": "boolean"
+        },
+        "colorExpression": {
+          "description": "Color expression, \"useExpression\" must also be true",
+          "type": "StringExpression"
+        }
+      }
+    },
+    "BackgroundImage": {
+      "description": "Chart background image.\n\nBackground image takes precedence over background color.",
+      "kind": "object",
+      "entries": {
+        "mode": {
+          "description": "Mode",
+          "kind": "literal",
+          "value": "\"media\""
+        },
+        "mediaUrl": {
+          "description": "Media url",
+          "type": "#/definitions/MediaUrl"
+        }
+      }
+    },
+    "MediaUrl": {
+      "description": "Media url",
+      "kind": "object",
+      "entries": {
+        "qStaticContentUrlDef": {
+          "description": "Background image mode",
+          "kind": "object",
+          "entries": {
+            "qUrl": {
+              "description": "Relative path of the image",
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
     "TitleOptions": {
       "description": "Title styling options",
       "kind": "object",

diff --git a/src/ext/property-panel/settings/styling-panel/index.ts b/src/ext/property-panel/settings/styling-panel/index.ts
@@ -15,6 +15,7 @@ const getStylingPanelConfig = (translator: stardust.Translator, flags: Flags) =>
       translation: "LayerStyleEditor.component.styling",
       ref: "components",
       useGeneral: true,
+      useBackground: true,
       defaultValue: [],
       items: {
         headerSection: largePanelSection({ section: "header", defaultFontStyle: ["bold"], translator, flags }),

diff --git a/src/qae/initial-properties.js b/src/qae/initial-properties.js
@@ -162,6 +162,8 @@ const properties = {
  * @type object
  * @property {GeneralStylingKey} key
  * @property {TitleStyling} title
+ * @property {BackgroundColor | BackgroundColorExpression} [bgColor]
+ * @property {BackgroundImage} [bgImage]
  * @example
  * {
  *  key: "general",
@@ -172,10 +174,63 @@ const properties = {
  *      fontStyle: ["bold", "italic"],
  *      color: { color: "orangered" },
  *    }
+ *  },
+ *  bgColor: {
+ *    useExpression: true,
+ *    color: {
+ *      index: 6,
+ *      color: "#006580"
+ *    },
+ *    colorExpression: {
+ *      qStringExpression: {
+ *        qExpr: "red()"
+ *      }
+ *    }
+ *  },
+ *  bgImage: {
+ *    mode: "media",
+ *    mediaUrl: {
+ *      qStaticContentUrlDef: {
+ *        qUrl: "<path-to-image>"
+ *      }
+ *    }
  *  }
  * }
  */
 
+/**
+ * Chart background color
+ * @name BackgroundColor
+ * @type object
+ * @property {PaletteColor} color - Background color palette
+ */
+
+/**
+ * Chart background color by expression
+ * @name BackgroundColorExpression
+ * @type object
+ * @property {boolean} useExpression - Boolean to indicate if color by expression should be used
+ * @property {StringExpression} colorExpression - Color expression, "useExpression" must also be true
+ */
+
+/**
+ * Chart background image.
+ *
+ * Background image takes precedence over background color.
+ * @name BackgroundImage
+ * @type object
+ * @property {"media"} mode - Mode
+ * @property {MediaUrl} mediaUrl - Media url
+ */
+
+/**
+ * Media url
+ * @name MediaUrl
+ * @type object
+ * @property {object} qStaticContentUrlDef - Background image mode
+ * @property {string} qStaticContentUrlDef.qUrl - Relative path of the image
+ */
+
 /**
  * Title styling options
  * @name TitleOptions