Public
Edited
Dec 27, 2023
wdWrapper (
{
head: {text: 'Data Labels Styling Flexibility'},
config: { skin: 'professional', hscale: 1, marks: true, fit2pane: 1,wrapSvgInImg:0,
customStyle: '.data_label{fill:blue}' +
'.mySplData{stroke:darksalmon;stroke-dasharray:1;fill:none;font-size:16px}'
},
signal: [
{},
{name: 'CLK', wave: '01'.repeat(3)},
{},
{name: ['tspan',{dy:-7.5},'data_label',['tspan',{dy:15,x:-10},'+ nullification in one entry']],
wave: '=' + '<.=>.'.repeat(2) + '<.=>',
data:['RXD1','RXD2',
['tspan',{'fill':'black'},'RXD3']
],
},{},
{name: ['tspan',{dy:-7.5},'dlStyle + data_label',['tspan',{dy:15,x:-10},'+ nullification in one entry']],
wave: '=' + '<.=>.'.repeat(2) + '<.=>',
data:['RXD1',
['tspan',{style: 'fill:black;font-size:11pt;fill-opacity:1;',},'RXD2'],
'RXD3'],
dlStyle: 'font-size:12px;fill-opacity:0.5'
},{},
{
name: ['tspan',{dy:-7.5},'dlStyle + nullify data_label',['tspan',{dy:15,x:-10},'+ nullification in one entry']],
wave: '=' + '<.=>.'.repeat(2) + '<.=>',
data:[
['tspan',{style: 'fill:black;font-size:11pt;fill-opacity:1;',},'RXD1'],
'RXD2','RXD3'],
dlStyle: 'font-size:12px;fill-opacity:0.5;fill:black'
},{},
{name: ['tspan',{dy:-7.5},'dlClass (overrides default data_label)',['tspan',{dy:15,x:-10},'+ nullification in one entry']],
wave: '=' + '<.=>.'.repeat(2) + '<.=>',
data:['RXD1',
['tspan',{style: 'stroke:none;fill:black;font-size:11pt;fill-opacity:1;',},'RXD2'],
'RXD3'],
dlClass: 'mySplData'
},
{},
],
}
,2
)
wdWrapper (
{
config: { skin: 'professional_srf',
marks: true,
customStyle: '.colorData{fill:red;font-size:10px}',
hbounds: [0,6], wrapSvgInImg: 0,
fit2pane: 1 },
head: { tick: 0, text: ['tspan',{'font-size': '12px'},'Data Labels Rendering Customization',]},
signal: [
{ },
{ name: 'CLK', wave: '0101010', id: 'clk'},
{},
{ name: 'ADDR', wave: '=======', data: ['A0','A1','A2','A3','A4','A5'], dlClass: 'colorData', id: 'addr'},
{},
{ name: 'WDATA', wave: '=======', data: ['W0','W1','W2','W3','W4','W5'], dlClass: 'colorData', dlStyle: 'font-size:16px;', id: 'wdata'},
{},
{ name: 'RDATA', wave: '=======', data: ['R0',
['tspan',{'font-weight': 'normal'},'K2'],
'R2','R3','R4','R5'],
dlStyle: 'font-weight:bolder;', id: 'rdata'},
{},
{ name: 'SIDEB', wave: '=======',
data: ['K0','K1',
['tspan',{fill:'cyan',rotate:-90, dy: 0, x: 8},'K2'],
'K3','K4','K5'], id: 'sideb'},
{},
],
}
,1)
wdWrapper( {config: {marks:false},signal: [{name:'Evaluating WaveDrom 24.01'}]}, 0)
wdWrapper = (() => {
wavedrom.waveSkin = window.WaveSkin ;
return (obj,i) => {
const actSVG = wavedrom.onml.stringify(wavedrom.renderAny(i, obj, wavedrom.waveSkin));
const parser = new DOMParser();
const actSVGForImg = parser.parseFromString(actSVG,'image/svg+xml').firstChild;
let ser = new XMLSerializer();
let imgt = document.createElement('img');
const svgAsImgString = encodeURIComponent(ser.serializeToString(actSVGForImg));
imgt.src = `data:image/svg+xml;utf8,${svgAsImgString}` ;
imgt.style = 'width:100%;height:100%;' ;
return imgt ;
}
})();
wd = (() => {
let i = 0 ;
wavedrom.waveSkin = window.WaveSkin ;
return (obj) => html`${wavedrom.onml.stringify(wavedrom.renderAny(i, obj, wavedrom.waveSkin))}`
})();
wavedrom = (await require(await FileAttachment("wavedrom@1.unpkg.min.js").url()));
(await require(await FileAttachment("narrow.js").url())).catch ( () => {} );
(await require(await FileAttachment("professional_srf.js").url())).catch ( () => {} );
(await require(await FileAttachment("professional.js").url())).catch ( () => {} );
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
