Steve Nyemba
2 weeks ago
parent
308f7fad79
commit
5eea2d67f3
@ -1,2 +1,2 @@
|
||||
xlsxwriter
|
||||
openpyxl
|
||||
openpyxl
|
||||
|
||||
|
After Width: | Height: | Size: 40 KiB |
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,13 @@
|
||||
|
||||
import cms
|
||||
#
|
||||
# register this in config.plugins: {"demo":["info"]}
|
||||
import cms
|
||||
#
|
||||
# register this in config.plugins: {"demo":["info"]}
|
||||
|
||||
|
||||
@cms.plugins(mimetype='application/json') :
|
||||
def info (**_args):
|
||||
_request= _args['request']
|
||||
_config = _args['config']
|
||||
return {"version":_config['system']['version'],'title':_config['layout']['header']['title']}
|
||||
pass
|
||||
@cms.plugins(mimetype='application/json') :
|
||||
def info (**_args):
|
||||
_request= _args['request']
|
||||
_config = _args['config']
|
||||
return {"version":_config['system']['version'],'title':_config['layout']['header']['title']}
|
||||
pass
|
||||
|
||||
@ -1,60 +1,63 @@
|
||||
<!-- Jspreadsheet CSS & JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce"></script>
|
||||
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
|
||||
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<canvas id="chartCanvas" width="600" height="400"></canvas>
|
||||
<button onclick="renderChart()">Generate Chart</button>
|
||||
|
||||
<script>
|
||||
const data = [
|
||||
['Year', 'Sales'],
|
||||
['2020', 100],
|
||||
['2021', 150],
|
||||
['2022', 130],
|
||||
['2023', 180]
|
||||
];
|
||||
async function ToClipboard(text) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
console.log('Text copied to clipboard successfully!');
|
||||
} catch (err) {
|
||||
console.error('Failed to copy text:', err);
|
||||
}
|
||||
}
|
||||
var copy = function(){
|
||||
_i = $('<i class="fa-solid fa-check"></i>')
|
||||
_button = $('.generated-code .copy')
|
||||
$(_button).empty()
|
||||
$(_button).append(_i)
|
||||
var _code = $('.generated-code code').text()
|
||||
|
||||
ToClipboard(_code)
|
||||
}
|
||||
$(document).ready(()=>{
|
||||
var _element = $('.generated-code code')[0]
|
||||
_html = $('.generated-code code').html()
|
||||
_html = _html.replace(/:label/g,sessionStorage._label)
|
||||
if (sessionStorage._query.startsWith('{')){
|
||||
pass
|
||||
}else{
|
||||
_html = _html.replace(/:_query/,`{'sql':"""${sessionStorage._query.replace(/\n/g,' ')}"""}`)
|
||||
}
|
||||
$('.generated-code code').html(_html)
|
||||
|
||||
Prism.highlightElement(_element)
|
||||
$('.generated-code .copy').on('click',copy)
|
||||
})
|
||||
</script>
|
||||
|
||||
const spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
|
||||
data,
|
||||
columns: [
|
||||
{ type: 'text', title: 'Year', width: 100 },
|
||||
{ type: 'numeric', title: 'Sales', width: 100 },
|
||||
]
|
||||
});
|
||||
function renderChart() {
|
||||
const sheetData = spreadsheet.getData();
|
||||
const labels = sheetData.slice(1).map(row => row[0]);
|
||||
const values = sheetData.slice(1).map(row => parseFloat(row[1]));
|
||||
<div style="width:650px;">
|
||||
|
||||
const ctx = document.getElementById('chartCanvas').getContext('2d');
|
||||
<div class="generated-code">
|
||||
<span class="active copy" style="float:right; padding:4px" >
|
||||
<i class="fa-solid fa-copy" ></i>
|
||||
</span>
|
||||
<pre style="margin:4px; padding:4px; background-color: transparent;">
|
||||
<code class="code language-python" style="line-height:1.5;text-wrap: wrap;">
|
||||
"""
|
||||
install data-transport
|
||||
pip install data-transport[all]@git+https://github.com/lnyemba/data-transport
|
||||
"""
|
||||
import transport
|
||||
import pandas as pd
|
||||
|
||||
// Clear previous chart instance if any
|
||||
if (window.myChart) window.myChart.destroy();
|
||||
# data-transport instance to read data
|
||||
#
|
||||
reader = transport.get.reader(label=':label')
|
||||
_args = :_query
|
||||
|
||||
window.myChart = new Chart(ctx, {
|
||||
type: 'bar', // or 'line', 'pie', etc.
|
||||
data: {
|
||||
labels,
|
||||
datasets: [{
|
||||
label: 'Sales',
|
||||
data: values,
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.5)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<div id="spreadsheet"></div>
|
||||
# reading the query from ":label" into a pandas data-frame
|
||||
_df = reader.read(**_args)
|
||||
|
||||
print(_df.head())
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in new issue