Skip to content

Dev #411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 10, 2021
Merged

Dev #411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6b69199
working viz for sample
deocastephen Sep 8, 2021
a28e78f
javascript sample finished
deocastephen Sep 9, 2021
a59f1d9
update tabextsandbox version
seanmakesgames Sep 9, 2021
f2e0f69
typescript sample added
deocastephen Sep 9, 2021
d5490ec
touched up comments
deocastephen Sep 9, 2021
7fd1583
Merge pull request #407 from tableau/update_tabextsandbox
seanmakesgames Sep 10, 2021
77cf415
Merge pull request #410 from tableau/smontesdeoca/viz-samples
johnDance Sep 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions Samples-Typescript/VizImage/VizImage.trex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
<dashboard-extension id="com.tableau.extensions.samples.vizImage" extension-version="0.1.0">
<default-locale>en_US</default-locale>
<name resource-id="name"/>
<description>Viz Image Sample</description>
<author name="tableau" email="github@tableau.com" organization="tableau" website="https://www.tableau.com"/>
<min-api-version>1.6</min-api-version>
<source-location>
<url>http://localhost:8765/Samples-Typescript/VizImage/vizImage.html</url>
</source-location>
<icon>iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAlhJREFUOI2Nkt9vy1EYh5/3bbsvRSySCZbIxI+ZCKsN2TKtSFyIrV2WuRCJuBiJWxfuxCVXbvwFgiEtposgLFJElnbU1SxIZIIRJDKTrdu+53Uhra4mce7Oe57Pcz7JOULFisViwZ+29LAzOSjQYDgz1ZcCvWuXV11MJpN+OS/lm6179teqH0yDqxPTCyKSA8DcDsyOmOprnCaeP7459pdgy969i0LTC3IO/RQMyoHcQN+3cnljW3dNIFC47qDaK3g7BwdTkwBaBELT4ZPOUVWgKl4ZBnjxJPUlMDnTDrp0pmr6RHFeEjjcUUXPDGeSEwDN0Xg8sivxMhJNjGzbHd8PkM3eHRfkrBM5NkcQaY2vUnTlrDIA0NoaX+KLXFFlowr14tvVpqb2MICzmQcKqxvbumv+NAhZGCCIPwEw6QWXKYRL/VUXO0+rAUJiPwAk5MIlgVfwPjjHLCL1APmHN94ZdqeYN+NW/mn6I4BvwQYchcLnwFhJMDiYmlRxAzjpKWZkYkUCcZ2I61wi37tLbYyjiN0fHk5Oz3nGSLSzBbNHCF35R7f6K1/hN9PRhek11FrymfQQQKB4+Gl05P2qNRtmETlXW7e+b2z01dfycGNbfFMAbqNyKp9Jp4rzOT8RYFs0njJkc2iqsCObvTsOsDWWqA5C1uFy+Uz/oXJeKwVT4h0RmPUXhi79vuC0Ku6yOffTK3g9lfxfDQAisY516sg5kfOCiJk7HoLt2cf9b/9LANAc7dznm98PagG1fUOZ9IP5uMB8Q4CPoyNvausapkTt3rNMuvdf3C/o6+czhtdwmwAAAABJRU5ErkJggg==</icon>
</dashboard-extension>
<resources>
<resource id="name">
<text locale="en_US">Viz Image Sample</text>
</resource>
</resources>
</manifest>
48 changes: 48 additions & 0 deletions Samples-Typescript/VizImage/vizImage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Viz Image Sample</title>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

<!-- Extensions Library (this will be hosted on a CDN eventually) -->
<script src="../../lib/tableau.extensions.1.latest.js"></script>

<!-- Our extension's code -->
<script src="../../dist/vizImage.js"></script>
</head>
<body>
<div class="container">
<h4>Viz Image Sample</h4>
<div id="viz-options">
<select id="mark-select" class="form-select" aria-label="Default select example" disabled="true">
<option selected disabled>Mark Type</option>
<option value="bar">Bar</option>
<option value="line">Line</option>
<option value="area">Area</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="text">Text</option>
</select>
<!-- See all color palettes available: https://tableau.github.io/extensions-api/docs/trex_tableau_viz_ref.html -->
<select id="color-select" class="form-select" aria-label="Default select example" disabled="true">
<option selected disabled>Color Palette</option>
<option value="tableau20_10_0">Tableau 20</option>
<option value="summer_10_0">Summer</option>
<option value="winter_10_0">Winter</option>
<option value="color_blind_10_0">Color Blind</option>
</select>
</div>
<hr>
<div id="viz-container"></div>
</div>
</body>
</html>
92 changes: 92 additions & 0 deletions Samples-Typescript/VizImage/vizImage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { MarkType } from '@tableau/extensions-api-types';

// Wrap everything in an anonymous function to avoid polluting the global namespace
(async () => {
class VizImage {
// Avoid globals.
constructor(private _$: JQueryStatic) { }

/**
* Initializes the extension
*/
public async initialize() {
console.log('Waiting for DOM ready');
await this._$.ready;
console.log('Initializing extension API');
await tableau.extensions.initializeAsync();

await this.addVizImage(tableau.MarkType.Bar, 'tableau20_10_0');

const markSelector = this._$('#mark-select');
const colorSelector = this._$('#color-select');

markSelector.prop('disabled', false);
colorSelector.prop('disabled', false);

// updating viz images with new values upon a selector change
markSelector.change(() => {
this.addVizImage(markSelector.val() as MarkType, colorSelector.val() as string);
});
colorSelector.change(() => {
this.addVizImage(markSelector.val() as MarkType, colorSelector.val() as string);
});
}

/**
* Builds the input specifications and displays the created viz image
* @param markType
* @param colorPalette
*/
private async addVizImage(markType: MarkType, palette: string) {
// Building the input specification object that is used to create the viz image
// Data values used in the viz image are prefilled
const vizInputSpec = {
data: {
values: [
{Product: 'Paper', Sales: 28, Region: 'Central'},
{Product: 'Pens', Sales: 45, Region: 'East'},
{Product: 'Rulers', Sales: 35, Region: 'East'},
{Product: 'Rulers', Sales: 43, Region: 'South'},
{Product: 'Paper', Sales: 50, Region: 'West'},
{Product: 'Pens', Sales: 56, Region: 'West'}
]
},
description: 'A sample viz', // optional parameter
encoding: {
color: {field: 'Product', type: tableau.VizImageEncodingType.Discrete, palette},
columns: {field: 'Region', type: tableau.VizImageEncodingType.Discrete},
rows: {field: 'Sales', type: tableau.VizImageEncodingType.Continuous}
},
mark: markType,
markcolor: '#FFED5F', // may not get used in viz if color is encoded in viz
size: {width: 400, height: 300}
};

// defaulting values if null
if (markType === null) {
vizInputSpec.mark = tableau.MarkType.Bar;
}
if (palette === null) {
vizInputSpec.encoding.color.palette = 'tableau20_10_0';
}

const svg = await tableau.extensions.createVizImageAsync(vizInputSpec);
// making call to create viz image from the input specifications
const blob = new Blob([svg], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const image = document.createElement('img');
image.src = url;
image.style.maxWidth = '100%';
image.style.maxHeight = '100%';
image.className = 'center-block';
const vizApiElement = document.getElementById('viz-container');
// clearing UI and adding in new viz
vizApiElement.innerHTML = '';
vizApiElement.appendChild(image);
image.addEventListener('load', () => URL.revokeObjectURL(url), { once: true });
}
}

console.log('Initializing VizImage extension.');
await new VizImage($).initialize();
})();
19 changes: 19 additions & 0 deletions Samples/VizImage/VizImage.trex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
<dashboard-extension id="com.tableau.extensions.samples.vizImage" extension-version="0.1.0">
<default-locale>en_US</default-locale>
<name resource-id="name"/>
<description>Viz Image Sample</description>
<author name="tableau" email="github@tableau.com" organization="tableau" website="https://www.tableau.com"/>
<min-api-version>1.6</min-api-version>
<source-location>
<url>http://localhost:8765/Samples/VizImage/vizImage.html</url>
</source-location>
<icon>iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAlhJREFUOI2Nkt9vy1EYh5/3bbsvRSySCZbIxI+ZCKsN2TKtSFyIrV2WuRCJuBiJWxfuxCVXbvwFgiEtposgLFJElnbU1SxIZIIRJDKTrdu+53Uhra4mce7Oe57Pcz7JOULFisViwZ+29LAzOSjQYDgz1ZcCvWuXV11MJpN+OS/lm6179teqH0yDqxPTCyKSA8DcDsyOmOprnCaeP7459pdgy969i0LTC3IO/RQMyoHcQN+3cnljW3dNIFC47qDaK3g7BwdTkwBaBELT4ZPOUVWgKl4ZBnjxJPUlMDnTDrp0pmr6RHFeEjjcUUXPDGeSEwDN0Xg8sivxMhJNjGzbHd8PkM3eHRfkrBM5NkcQaY2vUnTlrDIA0NoaX+KLXFFlowr14tvVpqb2MICzmQcKqxvbumv+NAhZGCCIPwEw6QWXKYRL/VUXO0+rAUJiPwAk5MIlgVfwPjjHLCL1APmHN94ZdqeYN+NW/mn6I4BvwQYchcLnwFhJMDiYmlRxAzjpKWZkYkUCcZ2I61wi37tLbYyjiN0fHk5Oz3nGSLSzBbNHCF35R7f6K1/hN9PRhek11FrymfQQQKB4+Gl05P2qNRtmETlXW7e+b2z01dfycGNbfFMAbqNyKp9Jp4rzOT8RYFs0njJkc2iqsCObvTsOsDWWqA5C1uFy+Uz/oXJeKwVT4h0RmPUXhi79vuC0Ku6yOffTK3g9lfxfDQAisY516sg5kfOCiJk7HoLt2cf9b/9LANAc7dznm98PagG1fUOZ9IP5uMB8Q4CPoyNvausapkTt3rNMuvdf3C/o6+czhtdwmwAAAABJRU5ErkJggg==</icon>
</dashboard-extension>
<resources>
<resource id="name">
<text locale="en_US">Viz Image Sample</text>
</resource>
</resources>
</manifest>
48 changes: 48 additions & 0 deletions Samples/VizImage/vizImage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Viz Image Sample</title>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

<!-- Extensions Library (this will be hosted on a CDN eventually) -->
<script src="../../lib/tableau.extensions.1.latest.js"></script>

<!-- Our extension's code -->
<script src="./vizImage.js"></script>
</head>
<body>
<div class="container">
<h4>Viz Image Sample</h4>
<div id="viz-options">
<select id="mark-select" class="form-select" aria-label="Default select example" disabled="true">
<option selected disabled>Mark Type</option>
<option value="bar">Bar</option>
<option value="line">Line</option>
<option value="area">Area</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="text">Text</option>
</select>
<!-- See all color palettes available: https://tableau.github.io/extensions-api/docs/trex_tableau_viz_ref.html -->
<select id="color-select" class="form-select" aria-label="Default select example" disabled="true">
<option selected disabled>Color Palette</option>
<option value="tableau20_10_0">Tableau 20</option>
<option value="summer_10_0">Summer</option>
<option value="winter_10_0">Winter</option>
<option value="color_blind_10_0">Color Blind</option>
</select>
</div>
<hr>
<div id="viz-container"></div>
</div>
</body>
</html>
77 changes: 77 additions & 0 deletions Samples/VizImage/vizImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
'use strict';

// Wrap everything in an anonymous function to avoid polluting the global namespace
(function () {
$(document).ready(function () {
tableau.extensions.initializeAsync().then(function () {
addVizImage(tableau.MarkType.Bar, 'tableau20_10_0');

let markSelector = $('#mark-select');
let colorSelector = $('#color-select');

markSelector.prop('disabled', false);
colorSelector.prop('disabled', false);

// updating viz images with new values upon a selector change.
markSelector.change(function () {
addVizImage(markSelector.val(), colorSelector.val());
});
colorSelector.change(function () {
addVizImage(markSelector.val(), colorSelector.val());
});
});
});

// This function creates and displays a viz image.
function addVizImage (markType, palette) {
// Building the input specification object that is used to create the viz image.
// Data values used in the viz image are prefilled.
const vizInputSpec = {
description: 'A sample viz', // optional parameter.
size: {width: 400, height: 300},
data: {
values: [
{'Product': 'Paper', 'Sales': 28, 'Region': 'Central'},
{'Product': 'Pens', 'Sales': 45, 'Region': 'East'},
{'Product': 'Rulers', 'Sales': 35, 'Region': 'East'},
{'Product': 'Rulers', 'Sales': 43, 'Region': 'South'},
{'Product': 'Paper', 'Sales': 50, 'Region': 'West'},
{'Product': 'Pens', 'Sales': 56, 'Region': 'West'}
]
},
mark: markType,
markcolor: '#FFED5F', // may not get used in viz if color is encoded in viz.
encoding: {
columns: {field: 'Region', type: tableau.VizImageEncodingType.Discrete},
rows: {field: 'Sales', type: tableau.VizImageEncodingType.Continuous},
color: {field: 'Product', type: tableau.VizImageEncodingType.Discrete, palette}
}
};

// defaulting values if null.
if (markType === null) {
vizInputSpec.mark = tableau.MarkType.Bar;
}
if (palette === null) {
vizInputSpec.encoding.color.palette = 'tableau20_10_0';
}

// making call to create viz image from the input specifications.
tableau.extensions.createVizImageAsync(vizInputSpec).then(function (svg) {
var blob = new Blob([svg], { type: 'image/svg+xml' });
var url = URL.createObjectURL(blob);
var image = document.createElement('img');
image.src = url;
image.style.maxWidth = '100%';
image.style.maxHeight = '100%';
image.className = 'center-block';
var vizApiElement = document.getElementById('viz-container');
// clearing UI and adding in new viz.
vizApiElement.innerHTML = '';
vizApiElement.appendChild(image);
image.addEventListener('load', function () { return URL.revokeObjectURL(url); }, { once: true });
}, function (err) {
console.log(err);
});
}
})();
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"devDependencies": {
"@tableau/extensions-api-types": "1.6.0",
"@tableau/tabextsandbox": "^1.1.0",
"@tableau/tabextsandbox": "^1.2.1",
"@types/jquery": "^3.3.29",
"concurrently": "^6.2.1",
"semistandard": "^11.0.0",
Expand Down
1 change: 1 addition & 0 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
datasources: './Samples-Typescript/DataSources/datasources.ts',
filtering: './Samples-Typescript/Filtering/filtering.ts',
parameters: './Samples-Typescript/Parameters/parameters.ts',
vizImage: './Samples-Typescript/VizImage/vizImage.ts',
},
mode: 'production',
output: {
Expand Down