Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Category widget | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray">
|
||||
<div class="dataview">
|
||||
<ul>
|
||||
<li>
|
||||
<h2 class="h2">Column</h2>
|
||||
<input id="column" type="text" value="adm0name" class="input_text open-sans"></input>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Limit</h2>
|
||||
<input id="limit" type="number" value="10" class="input_text open-sans"></input>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Operation</h2>
|
||||
<select id="operation" class="select open-sans">
|
||||
<option value="sum">SUM</option>
|
||||
<option value="count">COUNT</option>
|
||||
<option value="avg">AVG</option>
|
||||
<option value="max">MAX</option>
|
||||
<option value="min">MIN</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Operation column</h2>
|
||||
<input id="operationColumn" type="text" value="pop_max" class="input_text open-sans"></input>
|
||||
</li>
|
||||
</ul>
|
||||
<button onclick="applyDataviewChanges()" class="button open-sans">Apply</button>
|
||||
<pre class="code" id="data"></pre>
|
||||
</div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Category widget</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Create a widget with the category dataview.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Change form values.</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
|
||||
const categoryDataview = new carto.dataview.Category(source, 'adm0name', {
|
||||
limit: 10,
|
||||
operation: carto.operation.SUM,
|
||||
operationColumn: 'pop_max'
|
||||
});
|
||||
|
||||
categoryDataview.on('dataChanged', data => {
|
||||
document.getElementById('data').innerHTML = JSON.stringify(data, null, 4);
|
||||
});
|
||||
|
||||
categoryDataview.on('error', error => {
|
||||
alert(error.message);
|
||||
});
|
||||
|
||||
client.addDataview(categoryDataview);
|
||||
|
||||
function applyDataviewChanges() {
|
||||
const column = document.getElementById('column').value;
|
||||
const limit = document.getElementById('limit').value;
|
||||
const operation = document.getElementById('operation').value;
|
||||
const operationColumn = document.getElementById('operationColumn').value;
|
||||
|
||||
categoryDataview.setColumn(column);
|
||||
categoryDataview.setLimit(parseInt(limit));
|
||||
categoryDataview.setOperation(operation);
|
||||
categoryDataview.setOperationColumn(operationColumn);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Widgets error handling | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray">
|
||||
<div class="dataview">
|
||||
<ul>
|
||||
<li>
|
||||
<h2 class="h2">Column</h2>
|
||||
<input id="column" type="text" value="pop_max" class="input_text open-sans"></input>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Operation</h2>
|
||||
<select id="operation" class="select">
|
||||
<option value="count">COUNT</option>
|
||||
<option value="sum">SUM</option>
|
||||
<option value="avg">AVG</option>
|
||||
<option value="max">MAX</option>
|
||||
<option value="min">MIN</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
<button onclick="applyDataviewChanges()" class="button open-sans text-blue"><b>Apply</b></button>
|
||||
<button onclick="provokeError()" class="button button-error open-sans text-red"><b>Provoke error</b></button>
|
||||
<pre class="code" id="data"></pre>
|
||||
</div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Status and error handling</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Manage the status and erros in dataviews.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Apply submits the form. Provoke error sends a wrong column.</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset(`
|
||||
ne_10m_populated_places_simple
|
||||
`);
|
||||
|
||||
const formulaDataview = new carto.dataview.Formula(source, 'pop_max', {
|
||||
operation: carto.operation.COUNT
|
||||
});
|
||||
|
||||
let data;
|
||||
|
||||
formulaDataview.on('dataChanged', newData => {
|
||||
data = JSON.stringify(newData, null, 4);
|
||||
setText(data);
|
||||
});
|
||||
|
||||
formulaDataview.on('error', error => {
|
||||
setText(error.message);
|
||||
});
|
||||
|
||||
formulaDataview.on('statusChanged', status => {
|
||||
if (status === carto.dataview.status.LOADING) {
|
||||
setText('Loading...');
|
||||
} else if (status === carto.dataview.status.LOADED && data) {
|
||||
setText(data);
|
||||
}
|
||||
});
|
||||
|
||||
client.addDataview(formulaDataview);
|
||||
|
||||
function applyDataviewChanges() {
|
||||
const column = document.getElementById('column').value;
|
||||
const operation = document.getElementById('operation').value;
|
||||
|
||||
formulaDataview.setColumn(column);
|
||||
formulaDataview.setOperation(operation);
|
||||
}
|
||||
|
||||
function provokeError () {
|
||||
formulaDataview.setColumn('wrongcolumn');
|
||||
}
|
||||
|
||||
function setText (text) {
|
||||
document.getElementById('data').innerHTML = text;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Formula widget | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray">
|
||||
<div class="dataview">
|
||||
<ul>
|
||||
<li>
|
||||
<h2 class="h2">Column</h2>
|
||||
<input id="column" type="text" value="pop_max" class="input_text open-sans"></input>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Operation</h2>
|
||||
<select id="operation" class="select open-sans">
|
||||
<option value="count">COUNT</option>
|
||||
<option value="sum">SUM</option>
|
||||
<option value="avg">AVG</option>
|
||||
<option value="max">MAX</option>
|
||||
<option value="min">MIN</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
<button onclick="applyDataviewChanges()" class="button open-sans">Apply</button>
|
||||
<pre class="code" id="data"></pre>
|
||||
</div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Formula widget</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Create a widget with the formula dataview.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Change column or operation on the form.</p>
|
||||
<p class="open-sans">Example columns: rank_max, pop_max, pop_min.</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
|
||||
const formulaDataview = new carto.dataview.Formula(source, 'pop_max', {
|
||||
operation: carto.operation.COUNT
|
||||
});
|
||||
|
||||
formulaDataview.on('dataChanged', data => {
|
||||
document.getElementById('data').innerHTML = JSON.stringify(data, null, 4);
|
||||
});
|
||||
|
||||
formulaDataview.on('error', error => {
|
||||
alert(error.message);
|
||||
});
|
||||
|
||||
client.addDataview(formulaDataview);
|
||||
|
||||
function applyDataviewChanges() {
|
||||
const column = document.getElementById('column').value;
|
||||
const operation = document.getElementById('operation').value;
|
||||
|
||||
formulaDataview.setColumn(column);
|
||||
formulaDataview.setOperation(operation);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Histogram widget | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray">
|
||||
<div class="dataview">
|
||||
<ul>
|
||||
<li>
|
||||
<h2 class="h2">Column</h2>
|
||||
<input id="column" type="text" value="price" class="input_text open-sans"></input>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Bins</h2>
|
||||
<input id="bins" type="number" value="5" class="input_text open-sans"></input>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Start</h2>
|
||||
<input id="start" type="number" class="input_text open-sans"></input>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">End</h2>
|
||||
<input id="end" type="number" class="input_text open-sans"></input>
|
||||
</li>
|
||||
</ul>
|
||||
<button onclick="applyDataviewChanges()" class="button open-sans">Apply</button>
|
||||
<pre class="code" id="data"></pre>
|
||||
</div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Histogram widget</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Create a widget with the histogram dataview.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Change column or bins on the form.</p>
|
||||
<p class="open-sans">Start and end values must be used together.</p>
|
||||
<p class="open-sans">Example columns: price, minimum_nights, availability_365.</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.SQL('SELECT * FROM airbnb_listings WHERE price < 150');
|
||||
|
||||
const histogramDataview = new carto.dataview.Histogram(source, 'price', {
|
||||
bins: 5
|
||||
});
|
||||
|
||||
histogramDataview.on('dataChanged', data => {
|
||||
document.getElementById('data').innerHTML = JSON.stringify(data, null, 4);
|
||||
});
|
||||
|
||||
histogramDataview.on('error', error => {
|
||||
alert(error.message);
|
||||
});
|
||||
|
||||
client.addDataview(histogramDataview);
|
||||
|
||||
function applyDataviewChanges() {
|
||||
const column = document.getElementById('column').value;
|
||||
const bins = parseInt(document.getElementById('bins').value);
|
||||
const startValue = parseFloat(document.getElementById('start').value);
|
||||
const endValue = parseFloat(document.getElementById('end').value);
|
||||
|
||||
const start = Number.isFinite(startValue) ? startValue : null;
|
||||
const end = Number.isFinite(endValue) ? endValue : null;
|
||||
|
||||
try {
|
||||
histogramDataview.setColumn(column);
|
||||
histogramDataview.setStartEnd(start, end);
|
||||
histogramDataview.setBins(bins);
|
||||
} catch(error) {
|
||||
alert(error.message);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Time Series widget | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray">
|
||||
<div class="dataview">
|
||||
<ul>
|
||||
<li>
|
||||
<h2 class="h2">Column</h2>
|
||||
<input id="column" type="text" value="date" class="input_text open-sans"></input>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Aggregation</h2>
|
||||
<select id="aggregation" class="select">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="millennium">Millennium</option>
|
||||
<option value="century">Century</option>
|
||||
<option value="decade">Decade</option>
|
||||
<option value="year">Year</option>
|
||||
<option value="quarter">Quarter</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="week">Week</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="hour">Hour</option>
|
||||
<option value="minute">Minute</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="h2">Offset</h2>
|
||||
<input id="offset" type="number" value="1" class="input_text open-sans"></input>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="button open-sans" onclick="applyDataviewChanges()">Apply</button>
|
||||
<pre class="code" id="data"></pre>
|
||||
</div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Time Series widget</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Create a widget with the time series dataview.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Select different aggregations on the form.</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('railroad_data');
|
||||
|
||||
const timeseriesDataview = new carto.dataview.TimeSeries(source, 'date', {
|
||||
aggregation: carto.dataview.timeAggregation.AUTO,
|
||||
offset: 1
|
||||
});
|
||||
|
||||
timeseriesDataview.on('dataChanged', data => {
|
||||
document.getElementById('data').innerHTML = JSON.stringify(data, null, 4);
|
||||
});
|
||||
|
||||
timeseriesDataview.on('error', error => {
|
||||
alert(error.message);
|
||||
});
|
||||
|
||||
client.addDataview(timeseriesDataview);
|
||||
|
||||
function applyDataviewChanges() {
|
||||
const column = document.getElementById('column').value;
|
||||
const aggregation = document.getElementById('aggregation').value;
|
||||
const offset = document.getElementById('offset').value;
|
||||
|
||||
timeseriesDataview.setColumn(column);
|
||||
timeseriesDataview.setAggregation(aggregation);
|
||||
timeseriesDataview.setOffset(parseInt(offset));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user