Config editor

1. Pick a rank style

What the column is called

2. Set the grades

Best first. Each step sets its own badge color and what the grade is worth, and the page derives the dropdown, the sort order and the chart from this one list.

S Cell value Worth Color
A+ Cell value Worth Color
A Cell value Worth Color
B+ Cell value Worth Color
B Cell value Worth Color
C+ Cell value Worth Color
C Cell value Worth Color
D+ Cell value Worth Color
D Cell value Worth Color
F Cell value Worth Color

3. Point it at your sheet

Earphones Published CSV URL

Phonebook path Measurement link

Headphones Published CSV URL

Phonebook path Measurement link

The URL comes from File → Share → Publish to web, with the format set to comma-separated values. One sheet can serve both types.

4. Choose your columns

Driver — Hybrid, DD, BA, planar. A chip in the meta row, with a dropdown filter built from your rows.
Style — Open, closed, IEM, earbud. A chip in the meta row, with its own dropdown filter.
Comment — The main paragraph of the review.
Pros — A green block. One point per line.
Cons — A red block. One point per line.
Notes — A muted block for caveats and measurement remarks.
Tags — Comma-separated pills, also covered by search.
Score — A numeric column in your sheet. Turn it off to let the rank scale supply the score.

Each text block gets a parallel column per language you add in step 6, so Comment is joined by Comment_KR and any other you set up there.

5. Name your page

Header title Footer note

Footer link text Footer link URL

These go in the config, not in index.html. That file is three empty landmarks the page fills in, so this is the only place the wording lives.

6. Write it in more than one language

English is the base. Every language you add here gets its own column in the sheet, its own entry in the language toggle, and its own copy of the wording below. Anything you leave blank falls back to English, so a half-translated page is a working page.

Tag Called Column suffix

Reviews in Korean go in Comment_KR, Pros_KR, Cons_KR and Notes_KR. The language button moves from here to English.

Your wording 21 of 22

The English text is on the left. Leave a row blank to show the English on this language's pages too.

Page

Header title SquigRanking Footer note The 'Ranking List' is based on the operator's personal listening experience and subjective evaluation of sound quality. Search box Search

Columns

Rank column Rank Card heading Device Brand Brand Model Model Driver column Driver Style column Style Comment column Comment Pros column Pros Cons column Cons Notes column Notes Tags column Tags Score column Score Measurement link View Measurement

Device types

Earphones tab Earphones Headphones tab Headphones

Sort options

rank-asc {rank} (Best First) rank-desc {rank} (Worst First) score-desc Score (High to Low) score-asc Score (Low to High)

{rank} is replaced with the rank column's name in this language, so renaming the column renames its sort options too.

Interface strings 0 of 18

Korean's interface strings ship inside the page. Fill a row in only to override the built-in text.

toggleLanguage View in Korean The tooltip on the language button. Built from the names above unless you word it yourself. filterAndSort Filter & Sort resetFilters Reset Filters search Search sortBy Sort by all All statsTitle Ranking Statistics averageScore Average Score: deviceCount Device Count closeStats Close statistics openStats Open statistics measurementsPage Go to Measurements Page toggleTheme Toggle Light/Dark Theme scrollTop Scroll to top noResults No devices match the current filters. loadError Could not load the ranking data. Check the source URL in ranking-config.js. ascending A to Z descending Z to A

Add a language

7. Take the file

Your sheet's header row should read: Brand, Model, Rank, Score, Driver, Style, Comment, Pros, Cons, Notes, Tags, Comment_KR, Pros_KR, Cons_KR, Notes_KR

// Generated by the squigRanking config editor.
// https://potatosalad775.github.io/squigRanking/docs/config-editor/
//
// Loaded as a plain <script> before core.js, so window.RANKING_CONFIG is set
// at parse time. Edit it by hand freely: this is a normal JavaScript file.
//
// The JSDoc line below gives editors autocomplete and inline validation once
// `npm install squig-ranking` has run. It is a comment, so deleting it changes
// nothing at runtime.

/** @type {import('squig-ranking').RankingConfig} */
window.RANKING_CONFIG = {
	configVersion: 4,

	types: {
		earphone: {
			label: { default: 'Earphones', i18n: { ko: '이어폰' } },
			source: {
				kind: 'csv',
				url: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSks_18k_uClvDeIliTDCEILHXkKEltrE5wEiUfQAIwq1NvlFkB49OTFmfazjx7FFJC8alqW-0nXZhI/pub?gid=667242096&single=true&output=csv',
			},
			phonebook: '../data/phone_book.json',
			measurementUrl: '../?share={file}',
			measurementsPageUrl: '../',
		},
		headphone: {
			label: { default: 'Headphones', i18n: { ko: '헤드폰' } },
			source: {
				kind: 'csv',
				url: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSks_18k_uClvDeIliTDCEILHXkKEltrE5wEiUfQAIwq1NvlFkB49OTFmfazjx7FFJC8alqW-0nXZhI/pub?gid=667242096&single=true&output=csv',
			},
			phonebook: '../headphones/data/phone_book.json',
			measurementUrl: '../headphones/?share={file}',
			measurementsPageUrl: '../headphones/',
		},
	},

	columns: [
		{
			id: 'rank',
			source: 'Rank',
			role: 'rank',
			label: { default: 'Rank', i18n: { ko: '등급' } },
			sortable: true,
			// The scale is the whole rank definition: order, dropdown options,
			// badge colors, chart colors, and the score each step is worth.
			scale: [
				{ value: 'S', score: 5, color: '#6c63ff' },
				{ value: 'A+', score: 4.5, color: '#00bfae' },
				{ value: 'A', score: 4, color: '#00bfff' },
				{ value: 'B+', score: 3.5, color: '#4caf50' },
				{ value: 'B', score: 3, color: '#8bc34a' },
				{ value: 'C+', score: 2.5, color: '#ffb347' },
				{ value: 'C', score: 2, color: '#ffc107' },
				{ value: 'D+', score: 1.5, color: '#ff9800' },
				{ value: 'D', score: 1, color: '#ff5722' },
				{ value: 'F', score: 0, color: '#b71c1c' },
			],
			filter: { kind: 'select' },
			render: { kind: 'rank-badge' },
		},
		{
			id: 'title',
			label: { default: 'Device', i18n: { ko: '기기' } },
			render: { kind: 'title', template: '{Brand} {Model}' },
		},
		{
			id: 'brand',
			source: 'Brand',
			role: 'brand',
			label: { default: 'Brand', i18n: { ko: '브랜드' } },
			sortable: true,
			filter: { kind: 'text' },
			render: { kind: 'none' },
		},
		{
			id: 'model',
			source: 'Model',
			role: 'model',
			label: { default: 'Model', i18n: { ko: '모델' } },
			sortable: true,
			filter: { kind: 'text' },
			render: { kind: 'none' },
		},
		{
			id: 'driver',
			source: 'Driver',
			label: { default: 'Driver', i18n: { ko: '드라이버' } },
			filter: { kind: 'select-auto' },
			render: { kind: 'meta-chip' },
		},
		{
			id: 'style',
			source: 'Style',
			label: { default: 'Style', i18n: { ko: '형태' } },
			filter: { kind: 'select-auto' },
			render: { kind: 'meta-chip' },
		},
		{
			id: 'comment',
			source: 'Comment',
			i18nSource: { en: 'Comment', ko: 'Comment_KR' },
			label: { default: 'Comment', i18n: { ko: '코멘트' } },
			render: { kind: 'block', style: 'plain' },
		},
		{
			id: 'pros',
			source: 'Pros',
			i18nSource: { en: 'Pros', ko: 'Pros_KR' },
			label: { default: 'Pros', i18n: { ko: '장점' } },
			render: { kind: 'block', style: 'up' },
		},
		{
			id: 'cons',
			source: 'Cons',
			i18nSource: { en: 'Cons', ko: 'Cons_KR' },
			label: { default: 'Cons', i18n: { ko: '단점' } },
			render: { kind: 'block', style: 'down' },
		},
		{
			id: 'notes',
			source: 'Notes',
			i18nSource: { en: 'Notes', ko: 'Notes_KR' },
			label: { default: 'Notes', i18n: { ko: '추가 의견' } },
			render: { kind: 'block', style: 'note' },
		},
		{
			id: 'tags',
			source: 'Tags',
			label: { default: 'Tags', i18n: { ko: '태그' } },
			filter: { kind: 'text' },
			render: { kind: 'tags', separator: ',' },
		},
		{
			id: 'score',
			source: 'Score',
			role: 'score',
			label: { default: 'Score', i18n: { ko: '점수' } },
			sortable: true,
			render: { kind: 'none' },
		},
		{
			id: 'measurement',
			label: { default: 'View Measurement', i18n: { ko: '측정 보기' } },
			render: { kind: 'measurement-link' },
		},
	],

	// Omitting `search.fields` searches every header any column declares.
	search: {
		enabled: true,
		label: { default: 'Search', i18n: { ko: '검색' } },
	},

	sort: {
		default: 'rank-asc',
		options: ['rank-asc', 'rank-desc', 'score-desc', 'score-asc', 'brand-asc', 'brand-desc', 'model-asc', 'model-desc'],
		labels: {
			'rank-asc': { default: 'Rank (Best First)', i18n: { ko: '등급순 (높은 순)' } },
			'rank-desc': { default: 'Rank (Worst First)', i18n: { ko: '등급순 (낮은 순)' } },
			'score-desc': { default: 'Score (High to Low)', i18n: { ko: '점수순 (높은 순)' } },
			'score-asc': { default: 'Score (Low to High)', i18n: { ko: '점수순 (낮은 순)' } },
		},
	},

	// Chart bars take their colors from the rank scale. Add `chartColors`
	// here only to override them.
	stats: {
		enabled: true,
		average: { source: 'Score', denominator: '5.00' },
	},

	// The header and footer. index.html carries no copy of its own.
	chrome: {
		title: 'SquigRanking',
		footer: {
			note: { default: 'The \'Ranking List\' is based on the operator\'s personal listening experience and subjective evaluation of sound quality.', i18n: { ko: '\'랭킹 리스트\'는 운영자의 개인적인 청음 경험과 음질에 대한 주관적 평가를 바탕으로 작성되었습니다.' } },
		},
	},

	deepLink: {
		template: '{Brand}-{Model}',
		slugify: 'lowercase-hyphen',
	},

	languages: { en: 'English', ko: 'Korean' },
};

Previous
Configuration reference Next
CrinGraph