Published
Edited
Jul 13, 2021
1 star
md `# SQL comparison`
md `### Word diff style`
html`<div style="font-family: Menlo, Consolas, monospace">${wordsDiffLines.map(line => line.replaceAll('\n', '<br/>')).join('')}</div>`
wordsDiffLines = wordsDiff.reduce((buffer, diffLine) => {
if ( !diffLine.added && !diffLine.removed ) {
const unchangedLines = diffLine.value.split("\n")
if ( unchangedLines.length > 6 ) {
buffer.push(unchangedLines.slice(0, 3).join("\n"));
buffer.push('\n...\n')
buffer.push(unchangedLines.slice(unchangedLines.length -3, unchangedLines.length).join("\n"));
} else {
buffer.push(diffLine.value);
}
}
else if ( diffLine.added ) {
buffer.push("<span style='color: green'>");
buffer.push(diffLine.value);
buffer.push("</span>");
}
else { // removed
buffer.push("<span style='text-decoration: line-through'>");
buffer.push(diffLine.value);
buffer.push("</span>");
}
return buffer;
}, []);
wordsDiff = jsdiff.diffWords(before_refactor_data, after_refactor_data);
md `## Data`
head_data = loadYAML('head_sql')
after_refactor_data = loadYAML('post_refactor_sql')
before_refactor_data = loadYAML('pre_refactor_sql');
md `## Functions`
function loadYAML(fileName) {
return fetch(`https://gist.githubusercontent.com/${gistId}/raw/${gistVersion}/${fileName}.yml`)
.then(response => response.text())
.then(text => jsyaml.load(text))
.then((queries) => {
return queries
.map((query) => query.replaceAll(/select([\s\S]*?)from/gi, "SELECT ... FROM"))
.map((query) => query.replaceAll(/\$\?(,\s\$\?)+/gi, "$?"))
})
.then(queries => [...new Set(queries)])
.then(queries => queries.map(splitLines(80)))
.then(queries => queries.join("\n"));
}
function splitLines(width) {
return function(text) {
return text.split(' ').reduce((lines, word) => {
let line = lines[lines.length - 1];
if ( line.length === 0 ) {
// pass
} else if ( line.length + word.length < width ) {
lines[lines.length - 1] += ' ';
}
else {
lines.push('');
}
lines[lines.length - 1] += word;
return lines;
}, [ '' ]).join("\n");
}
}
'my dog has fleas'.split(' ')
splitLines(10)('my dog has fleas')
md `## Constants`
gistId = 'kgilpin/0e48019d9cab2ea5accac00dc7a7594c';
gistVersion = 'cde54fcf2d888fb84a93514f198e2375acef6a7e';
md `## Dependencies`
jsyaml = require('https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js');
jsdiff = require('https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.0.0/diff.min.js');
md `## Appendix`
md `### Line diff style`
jsdiff.createPatch('sql.yml', before_refactor_data, after_refactor_data, 'before', 'after');
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.
