;
/**
* Updates the current context of this embed instance.
@@ -294,6 +295,23 @@ declare namespace stardust {
qId: string;
}
+ /**
+ * A controller to further modify a visualization after it has been rendered.
+ */
+ class Sheet {
+ constructor();
+
+ id: string;
+
+ model: string;
+
+ /**
+ * Destroys the sheet and removes it from the the DOM.
+ */
+ destroy(): void;
+
+ }
+
/**
* A controller to further modify a visualization after it has been rendered.
*/
@@ -302,6 +320,8 @@ declare namespace stardust {
id: string;
+ model: string;
+
/**
* Destroys the visualization and removes it from the the DOM.
*/
@@ -618,11 +638,12 @@ declare namespace stardust {
/**
* Resolve a color object using the color picker palette from the provided JSON theme.
* @param c
+ * @param supportNone Shifts the palette index by one to account for the "none" color
*/
getColorPickerColor(c: {
index?: number;
color?: string;
- }): string;
+ }, supportNone?: boolean): string;
/**
* Get the best contrasting color against the specified `color`.
diff --git a/apis/theme/src/index.js b/apis/theme/src/index.js
index 8085126cb..c5362b2d4 100644
--- a/apis/theme/src/index.js
+++ b/apis/theme/src/index.js
@@ -49,10 +49,12 @@ export default function theme() {
* @param {object} c
* @param {number=} c.index
* @param {string=} c.color
+ * @param {boolean=} supportNone Shifts the palette index by one to account for the "none" color
* @returns {string} The resolved color.
*
* @example
* theme.getColorPickerColor({ index: 1 });
+ * theme.getColorPickerColor({ index: 1 }, true);
* theme.getColorPickerColor({ color: 'red' });
*/
getColorPickerColor(...a) {
diff --git a/apis/theme/src/palette-resolver.js b/apis/theme/src/palette-resolver.js
index 0e5fe632c..26fb7c9ab 100644
--- a/apis/theme/src/palette-resolver.js
+++ b/apis/theme/src/palette-resolver.js
@@ -75,7 +75,9 @@ export default function theme(resolvedTheme) {
others: resolvedTheme.dataColors.othersColor,
};
},
- uiColor(c) {
+ uiColor(c, shift) {
+ // eslint-disable-next-line no-param-reassign
+ shift = !!shift;
if (c.index < 0 || typeof c.index === 'undefined') {
return c.color;
}
@@ -85,10 +87,10 @@ export default function theme(resolvedTheme) {
if (!uiPalette) {
return c.color;
}
- if (typeof uiPalette.colors[c.index] === 'undefined') {
+ if (typeof uiPalette.colors[c.index - shift] === 'undefined') {
return c.color;
}
- return uiPalette.colors[c.index];
+ return uiPalette.colors[c.index - shift];
},
};
}
diff --git a/scripts/run-rendering-tests.js b/scripts/run-rendering-tests.js
index 919c40811..ac32bbcae 100644
--- a/scripts/run-rendering-tests.js
+++ b/scripts/run-rendering-tests.js
@@ -1,4 +1,4 @@
const { execSync } = require('child_process');
-const cmd = 'mocha test/rendering/listbox/listbox.spec.js --bail false --timeout 30000';
+const cmd = 'mocha test/rendering/**/*.spec.js --bail false --timeout 30000';
execSync(cmd, { stdio: 'inherit' });
diff --git a/test/mashup/snaps/single.html b/test/mashup/snaps/single.html
index f89d14894..7bc23bbdc 100644
--- a/test/mashup/snaps/single.html
+++ b/test/mashup/snaps/single.html
@@ -18,6 +18,7 @@
position: absolute;
width: 100%;
height: 100%;
+ background-color: rgb(50, 50, 50);
}
diff --git a/test/rendering/__artifacts__/baseline/sheet_basic.png b/test/rendering/__artifacts__/baseline/sheet_basic.png
new file mode 100644
index 000000000..2d87bae97
Binary files /dev/null and b/test/rendering/__artifacts__/baseline/sheet_basic.png differ
diff --git a/test/rendering/sheet/configured.js b/test/rendering/sheet/configured.js
new file mode 100644
index 000000000..6d97db151
--- /dev/null
+++ b/test/rendering/sheet/configured.js
@@ -0,0 +1,45 @@
+const pie = {
+ component: {
+ mounted(el) {
+ // eslint-disable-next-line
+ el.innerHTML = 'Hello pie
';
+ },
+ },
+};
+
+const bar = function (env) {
+ env.translator.add({
+ id: 'hello',
+ locale: {
+ 'sv-SE': 'Hej {0}!',
+ },
+ });
+ return {
+ component: {
+ mounted(el) {
+ // eslint-disable-next-line
+ el.innerHTML = `${env.translator.get(
+ 'hello',
+ ['bar']
+ )}
`;
+ },
+ },
+ };
+};
+
+// eslint-disable-next-line
+const configured = stardust.embed.createConfiguration({
+ context: {
+ language: 'sv-SE',
+ },
+ types: [
+ {
+ name: 'piechart',
+ load: () => Promise.resolve(pie),
+ },
+ {
+ name: 'barchart',
+ load: () => Promise.resolve(bar),
+ },
+ ],
+});
diff --git a/test/rendering/sheet/sheet-data.js b/test/rendering/sheet/sheet-data.js
new file mode 100644
index 000000000..0eae89c61
--- /dev/null
+++ b/test/rendering/sheet/sheet-data.js
@@ -0,0 +1,50 @@
+/* eslint arrow-body-style: 0 */
+
+window.getFuncs = function getFuncs() {
+ return {
+ getSheetLayout: () => {
+ return {
+ qInfo: {
+ qId: 'sheet',
+ },
+ visualization: 'sheet',
+ cells: [
+ {
+ name: 'bar',
+ bounds: {
+ x: 0,
+ y: 0,
+ width: 50,
+ height: 50,
+ },
+ },
+ {
+ name: 'pie',
+ bounds: {
+ x: 50,
+ y: 50,
+ width: 50,
+ height: 50,
+ },
+ },
+ ],
+ };
+ },
+ getBarLayout: () => {
+ return {
+ qInfo: {
+ qId: 'bar',
+ },
+ visualization: 'barchart',
+ };
+ },
+ getPieLayout: () => {
+ return {
+ qInfo: {
+ qId: 'pie',
+ },
+ visualization: 'piechart',
+ };
+ },
+ };
+};
diff --git a/test/rendering/sheet/sheet.html b/test/rendering/sheet/sheet.html
new file mode 100644
index 000000000..695985351
--- /dev/null
+++ b/test/rendering/sheet/sheet.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/rendering/sheet/sheet.js b/test/rendering/sheet/sheet.js
new file mode 100644
index 000000000..4b3742a0c
--- /dev/null
+++ b/test/rendering/sheet/sheet.js
@@ -0,0 +1,46 @@
+/* global configured */
+/* eslint no-underscore-dangle: 0 */
+(() => {
+ async function getMocks(EnigmaMocker) {
+ const { getSheetLayout, getBarLayout, getPieLayout } = window.getFuncs();
+
+ const obj = [
+ {
+ id: `sheet`,
+ type: 'sheet',
+ getLayout: () => getSheetLayout(),
+ },
+ {
+ id: `bar`,
+ type: 'barchart',
+ getLayout: () => getBarLayout(),
+ },
+ {
+ id: `pie`,
+ type: 'piechart',
+ getLayout: () => getPieLayout(),
+ },
+ ];
+
+ const app = await EnigmaMocker.fromGenericObjects(obj);
+
+ return {
+ obj,
+ app,
+ };
+ }
+
+ const init = async () => {
+ const element = document.querySelector('#object');
+ const { app } = await getMocks(window.stardust.EnigmaMocker);
+
+ const nebbie = configured(app);
+
+ const inst = await nebbie.render({ id: 'sheet', element });
+ return () => {
+ inst?.unmount(element);
+ };
+ };
+
+ return init();
+})();
diff --git a/test/rendering/sheet/sheet.spec.js b/test/rendering/sheet/sheet.spec.js
new file mode 100644
index 000000000..f3454aaa0
--- /dev/null
+++ b/test/rendering/sheet/sheet.spec.js
@@ -0,0 +1,36 @@
+const getPage = require('../setup');
+const startServer = require('../server');
+const { looksLike } = require('../testUtils');
+
+describe('listbox mashup rendering test', () => {
+ const object = '[data-type="sheet"]';
+ let page;
+ let takeScreenshot;
+ let destroyServer;
+ let destroyBrowser;
+
+ let url;
+ const PAGE_OPTIONS = { width: 600, height: 500 };
+
+ beforeEach(async () => {
+ ({ url, destroy: destroyServer } = await startServer());
+ ({ page, takeScreenshot, destroy: destroyBrowser } = await getPage(PAGE_OPTIONS));
+ });
+
+ afterEach(async () => {
+ await Promise.all([destroyServer(), destroyBrowser()]);
+ });
+
+ it('selecting two values should result in two green rows', async () => {
+ const FILE_NAME = 'sheet_basic.png';
+
+ await page.goto(`${url}/sheet/sheet.html`);
+ await page.waitForSelector(object, { visible: true });
+
+ const snapshotElement = await page.$(object);
+ await page.$('#bar');
+ await page.$('#pie');
+ const { path: capturedPath } = await takeScreenshot(FILE_NAME, snapshotElement);
+ await looksLike(FILE_NAME, capturedPath);
+ });
+});