차트
Wikven 사이트의 차트는 사이트를 빌드할 때 한 번 그려지고, 독자가 받는 것은 그려진 그림입니다. Chart가 그 일을 하는 확장 기능이고, 한 부류의 첫 번째이기도 합니다. MediaWiki 곁에 자기 프로그램을 두고 싶어 하는 확장 기능이지요. 설정은 확장 기능 내려받기에 주소 하나가 더해지는 정도입니다.
이 문서가 하나를 그립니다. 아래에 적힌 것이 전부 그 차트가 나타나게 하려고 이 사이트가 하는 일입니다.
숫자는 chart-renderer가 예시로 들고 있는 것이라, Wikven이 아니라 캐나다 선거 이야기입니다. 볼 만한 것은 그림 쪽입니다. 이 문서의 원본을 보면 <svg>가 HTML 안에 그대로 들어 있고, 보낼 요청이 없습니다. 무엇이 돌기 전에 독자가 보는 것이 이것이고, 아무것도 안 돌아도 남는 것이 이것입니다.
그다음 Chart가 그 그림을 브라우저의 ECharts에 넘깁니다. 범례가 대답하게 만드는 것이 이쪽이지요. 정당을 누르면 그 선이 사라집니다. 그래서 어느 문서든 차트를 그리는 사이트는 스크립트 번들에 ECharts를 싣습니다. 830 KB쯤 되고, 번들이 사이트 전체가 공유하는 파일 하나라 모든 문서가 받습니다. 차트를 하나도 안 그리는 사이트는 이걸 싣지 않습니다.
사이트가 선언하는 것
Chart는 곁에 JsonConfig를 원하고, 둘 다 어느 문서가 자기 것인지 알려주어야 합니다:
extensions:
- JsonConfig
- Chart
config:
WikvenRepositories:
JsonConfig:
repository: https://github.com/wikimedia/mediawiki-extensions-JsonConfig.git
reference: REL1_46
Chart:
repository: https://github.com/wikimedia/mediawiki-extensions-Chart.git
reference: REL1_46
JsonConfigModels:
Tabular.JsonConfig: JsonConfig\JCTabularContent
Chart.JsonConfig: MediaWiki\Extension\Chart\JCChartContent
JsonConfigs:
Tabular.JsonConfig:
namespace: 486
nsName: Data
pattern: '/.\.tab$/'
license: CC0-1.0
isLocal: true
Chart.JsonConfig:
namespace: 486
nsName: Data
pattern: '/.\.chart$/'
license: CC0-1.0
isLocal: true
ChartServiceUrl: http://host.docker.internal:6284/v1/chart/render
두 확장 기능 모두 이 브랜치에 대한 배포 태그를 내지 않아서, 위 두 항목은 커밋을 고정하지 않고 브랜치를 따라갑니다. 그래서 같은 원본을 두 번 빌드해도 서로 다른 코드를 받을 수 있습니다. 이 사이트는 대신 둘 다 커밋에 고정합니다. 이유와 방법은 WikvenRepositories 맵을 보세요.
렌더러가 있는 곳
렌더러는 직접 돌리는 서비스이고, ChartServiceUrl은 그게 응답하는 곳입니다. chart-renderer를 클론해 npm install, npm start를 하면 6284 포트에서 듣습니다. 어느 주소를 적을지는 무엇이 빌드를 하느냐에 달렸습니다:
- 자기 주소를 가진 렌더러
- 그 주소를 쓰세요. 빌드를 어디로 옮겨도 계속 맞는 답이고, 설명이 필요 없는 유일한 답이기도 합니다.
- 독립 실행 바이너리
- 빌드가 당신의 기계에서 도니 렌더러는
http://localhost:6284/v1/chart/render에 있습니다. - 이미지, 또는 베이크 액션
- 빌드는 컨테이너 안에서 돌고 당신의 기계는 그 바깥이며, 이름은
host.docker.internal입니다. 이 사이트가 쓰는 것이자 위 예시가 보여주는 것입니다.
도커가 사이드카 컨테이너에 들어 있는 자체 호스팅 러너는 저 셋 중 어느 것으로도 덮이지 않습니다. 베이크가 그 사이드카의 데몬에 닿으므로 어느 이름으로도 러너를 찾지 못합니다. 그럴 때는 렌더러에 자기 주소를 주세요.
발행된 사이트는 렌더러와 이야기하지 않습니다. 렌더러는 문서를 쓰는 동안 차트마다 한 번씩 불려가고, 그 답이 문서에 구워져 들어갑니다. 그래서 배포하는 사이트도, 읽는 독자도 렌더러에 의존하지 않습니다.
데이터가 있는 곳
Chart는 Data: 이름공간에서 문서 두 개를 읽고, 둘 다 여느 원본 파일과 같습니다. 이름 자체가 무엇을 담았는지 이미 말하므로 .wikitext를 붙이지 않습니다:
docs/
Data/
Election.tab the numbers
Election.chart what to draw with them
.tab 문서는 표 데이터입니다. 필드를 이름 짓는 스키마와 행들이지요. .chart 문서는 그중 무엇을 어떻게 그릴지 말하고, source에 자기 .tab 문서를 적습니다. 그러고 나면 차트를 보여줄 문서에:
{{#chart:Election.chart}}
이 문서 맨 위 차트 바로 위에 있는 줄이 그것입니다.