shen/KLineChart
1
0
Fork 0
mirror of https://github.com/klinecharts/KLineChart.git synced 2024-11-25 16:22:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs: update docs

Browse Source
This commit is contained in:
liihuu 2024-10-28 02:57:03 +08:00
parent 4b0b05c878
commit 74819e37b1
14 changed files with 57 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/.vitepress/config/en-US.js
View File

@ -39,8 +39,11 @@ export default defineConfig({
]
},
{
text: `V${pkg.version}`,
items: [{ text: 'V8 Docs', link: 'https://v8.klinecharts.com' }]
text: 'Next',
items: [
{ text: 'V9 Docs', link: 'https://v9.klinecharts.com/en-US' },
{ text: 'V8 Docs', link: 'https://v8.klinecharts.com' }
]
},
],
sidebar: {

7
docs/.vitepress/config/zh-CN.js
View File

@ -43,8 +43,11 @@ export default defineConfig({
]
},
{
text: `V${pkg.version}`,
items: [{ text: 'V8 文档', link: 'https://v8.klinecharts.com/zh-CN' }]
text: 'Next',
items: [
{ text: 'V9 文档', link: 'https://v9.klinecharts.com' },
{ text: 'V8 文档', link: 'https://v8.klinecharts.com/zh-CN' }
]
},
],
sidebar: {

2
docs/@components/Chart.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted, watch, defineProps } from 'vue'
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useData } from 'vitepress';
import { transform } from '@babel/standalone'

4
docs/@components/CodeHighlight.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, ref, defineProps } from 'vue'
import { onMounted, ref } from 'vue'
import { codeToHtml } from 'shiki'
const props = defineProps(['code', 'width'])
@ -31,7 +31,7 @@ onMounted(async () => {
.code-highlight {
display: flex;
flex-direction: column;
border-radius: 12px;
border-radius: 8px;
border: solid 1px var(--vp-c-gutter);
background-color: var(--vp-code-block-bg)!important;
}

2
docs/@components/Tooltip.vue
View File

@ -1,6 +1,4 @@
<script setup>
import { defineProps } from 'vue'
const props = defineProps(['tip'])
</script>

33
docs/@views/Banner.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="banner" role="banner" v-if="isVisible">
<span v-if="lang === 'zh-CN'">🎉&nbsp;🎉&nbsp;🎉&nbsp;&nbsp;新版本即将发布，旧版文档请访问 <strong><a target="_blank" href="https://v9.klinecharts.com">这里</a></strong>。</span>
<span v-else>🎉&nbsp;🎉&nbsp;🎉&nbsp;&nbsp;The new version is about to be released, please visit <strong><a target="_blank" href="https://v9.klinecharts.com">here</a></strong> for the old version document.</span>
<div class="banner" :class="{ 'top': y === 0 }" role="banner" v-if="isVisible">
<span v-if="lang === 'zh-CN'">🎉&nbsp;🎉&nbsp;🎉&nbsp;&nbsp;新版本即将发布。9.x 版本请访问 <strong><a target="_blank" href="https://v9.klinecharts.com">文档</a></strong>。</span>
<span v-else>🎉&nbsp;🎉&nbsp;🎉&nbsp;&nbsp;The new version is about to be released. Version 9.x please visit <strong><a target="_blank" href="https://v9.klinecharts.com">document</a></strong>.</span>
<button class="banner-close" @click.prevent="closeBanner">
<span class="close">&times;</span>
</button>
@ -10,8 +10,11 @@
<script setup>
import { ref, onMounted } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { useData } from 'vitepress'
const { y } = useWindowScroll()
const isVisible = ref(true)
const { lang } = useData()
@ -42,13 +45,18 @@ onMounted(() => {
z-index: 61;
width: 100%;
height: 100%;
height: 50px;
background: var(--vp-c-bg);
height: var(--vp-layout-top-height);
background-color: var(--vp-c-bg);
overflow: hidden;
margin: 0;
color: var(--vp-c-indigo-1);
font-size: 14px;
border-bottom: solid 1px var(--vp-c-gutter);
transition: background-color 0.15s;
}
.banner.top {
background-color: transparent;
}
.banner-close {
@ -76,19 +84,6 @@ onMounted(() => {
<style>
html.banner-fixed {
--vp-layout-top-height: 50px;
}
html.banner-fixed .VPNav,
html.banner-fixed .VPSidebar {
top: 50px;
}
html.banner-fixed {
margin-top: 52px;
}
@media (max-width: 960px) {
html.banner-fixed .VPNav,
html.banner-fixed .VPSidebar {
top: 0;
}
--vp-layout-top-height: 50px
}
</style>

4
docs/@views/Layout.vue
View File

@ -48,9 +48,9 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }) => {
<template>
<DefaultTheme.Layout>
<!-- <template #layout-top>
<template #layout-top>
<Banner/>
</template> -->
</template>
<template #home-hero-before>
<HomeHero/>
</template>

2
docs/@views/customize/FeatureList.vue
View File

@ -11,8 +11,6 @@
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps(['features'])
</script>

13
docs/@views/home/CreateChart.vue
View File

@ -37,7 +37,7 @@ fetch('/data/kline.json').then(res => {
</CodeHighlight>
</div>
<div class="chart-container">
<span class="title" style="height: 58px;">
<span class="title">
<span class="address">
<svg
width="14"
@ -48,7 +48,7 @@ fetch('/data/kline.json').then(res => {
&nbsp;https://klinecharts.com/sample/basic
</span>
</span>
<Chart :js="code" height="360px"/>
<Chart :js="code" height="324px"/>
</div>
</div>
</Section>
@ -71,10 +71,10 @@ fetch('/data/kline.json').then(res => {
display: flex;
flex-direction: row;
align-items: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 0 20px;
height: 46px;
height: 52px;
color: var(--vp-c-text-2);
background-color: var(--vp-c-bg-soft);
border-bottom: solid 1px var(--vp-c-gutter);
@ -86,10 +86,9 @@ fetch('/data/kline.json').then(res => {
.chart-container {
width: 100%;
border-radius: 12px;
border-radius: 8px;
border: solid 1px var(--vp-c-gutter);
background-color: var(--vp-code-block-bg);
padding-bottom: 6px;
}
.address {

1
docs/@views/home/FAQ.vue
View File

@ -136,6 +136,7 @@ watch(lang, (newLang) => {
width: 100%;
background-color: var(--vp-c-bg-soft);
padding: 16px 26px;
border-radius: 8px;
color: var(--vp-c-text-1);
}

1
docs/@views/home/Section.vue
View File

@ -1,5 +1,4 @@
<script setup>
import { defineProps } from 'vue'
const props = defineProps(['title', 'subTitle'])
</script>

20
docs/@views/home/Sponsor.vue
View File

@ -48,11 +48,11 @@
:subTitle="lang === 'zh-CN' ? '维护这样一个图表和开发新功能需要巨大精力，只有在我们的赞助者慷慨的财务支持下才得以持续。' : 'Maintaining such a chart and developing new features requires tremendous effort, which can only be sustained with the generous financial support of our sponsors.'">
<div class="sponsor">
<div class="sponsor-grid sponsor-top-grid">
<a class="sponsor-grid-item item-no1" :href="sponsors[0].website" target="_blank" rel="noreferrer">
<a class="sponsor-grid-item item-no2-no3" :href="sponsors[0].website" target="_blank" rel="noreferrer">
<img class="image" :src="sponsors[0].logo"/>
<span class="text" v-if="!!sponsors[0].text">{{ sponsors[0].text }}</span>
</a>
<a class="sponsor-grid-item item-no1" :href="sponsors[1].website" target="_blank" rel="noreferrer">
<a class="sponsor-grid-item item-no2-no3" :href="sponsors[1].website" target="_blank" rel="noreferrer">
<img class="image" :src="sponsors[1].logo"/>
<span class="text" v-if="!!sponsors[1].text">{{ sponsors[1].text }}</span>
</a>
@ -106,7 +106,7 @@
.sponsor-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
gap: 12px;
}
.sponsor-grid-item {
@ -116,7 +116,7 @@
width: 100%;
color: var(--vp-c-text-2)!important;
background-color: var(--vp-c-bg-soft);
border-radius: 4px;
border-radius: 8px;
transition: background-color .2s;
cursor: pointer;
color: inherit;
@ -129,7 +129,7 @@
}
.sponsor-top-grid .item-no1 {
height: 160px;
height: 200px;
font-size: 16px;
}
@ -190,6 +190,9 @@
}
@media (min-width: 640px) {
.sponsor-grid {
gap: 20px;
}
.sponsor-platinum-grid .item {
width: calc((100% - 12px) / 3);
}
@ -201,7 +204,12 @@
@media (min-width: 960px) {
.sponsor-top-grid .item-no2-no3 {
width: calc((100% - 6px) / 2);
width: calc((100% - 20px) / 2);
height: 200px;
}
.sponsor-top-grid .item-no2-no3 .image {
height: 72px;
}
.sponsor-platinum-grid .item {

82
docs/@views/sample/Chart.vue
View File

@ -1,93 +1,21 @@
<script setup>
import { ref, onMounted, onUnmounted, watch, defineProps } from 'vue'
import { ref } from 'vue'
import { useData } from 'vitepress';
import stackBlitz from '@stackblitz/sdk'
import { getParameters } from 'codesandbox/lib/api/define'
import { transform } from '@babel/standalone'
import Chart from '../../@components/Chart.vue';
import ResizeObserver from 'resize-observer-polyfill'
const { isDark, lang } = useData()
const { lang } = useData()
import Tooltip from '../../@components/Tooltip.vue'
import Loading from '../../@components/Loading.vue'
const href = ref()
const props = defineProps(['js', 'css', 'html', 'title', 'description'])
const version = ref('9.5.0')
const loading = ref(true)
let observer
onMounted(() => {
href.value = location.href
loading.value = true
const container = document.getElementById('container')
const coreScript = document.createElement('script')
coreScript.defer = true
coreScript.src = 'https://unpkg.com/klinecharts/dist/umd/klinecharts.min.js'
coreScript.onload = () => {
const klinecharts = window.klinecharts
if (klinecharts) {
version.value = klinecharts.version()
if (props.css) {
const style = document.createElement('style')
style.setAttribute('type', 'text/css')
style.innerHTML = props.css
container.appendChild(style)
}
if (props.js) {
const transformJs = props.js + '\n' + 'window.chart = chart'
const { code } = transform(transformJs, {
presets: [
'es2015',
['stage-3', { decoratorsBeforeExport: true }],
],
plugins: ['transform-modules-umd'],
})
const chartDom = document.createElement('div')
chartDom.style.height = '430px'
chartDom.id = 'k-line-chart'
container.appendChild(chartDom)
const script = document.createElement('script')
script.innerHTML = code
container.appendChild(script)
window.chart.setStyles(isDark.value ? 'dark' : 'light')
observer = new ResizeObserver(entries => {
window.chart.resize()
})
observer.observe(container)
}
loading.value = false
}
}
container.appendChild(coreScript)
})
watch(isDark, (newValue) => {
if (newValue) {
window.chart.setStyles('dark')
} else {
window.chart.setStyles('light')
}
})
onUnmounted(() => {
const container = document.getElementById('container')
if (observer && container) {
observer.unobserve(container)
}
if (window.klinecharts) {
window.klinecharts.dispose('k-line-chart')
}
})
function openStackBlitz () {
const files = {
@ -153,9 +81,7 @@ function getCodeSandboxParameters () {
<template>
<div class="chart sample-chart">
<div id="container" class="chart-container">
<Loading v-if="loading"/>
</div>
<Chart :js="props.js" :css="props.css"/>
<div class="code-action-container">
<form
action="https://codesandbox.io/api/v1/sandboxes/define"

5
package.json
View File

@ -67,7 +67,7 @@
"@rollup/pluginutils": "^5.1.0",
"@stackblitz/sdk": "^1.9.0",
"@types/node": "^20.12.7",
"shiki": "^1.22.1",
"@vueuse/core": "^11.1.0",
"chalk": "^5.3.0",
"codesandbox": "^2.2.3",
"cross-env": "^7.0.3",
@ -81,8 +81,9 @@
"resize-observer-polyfill": "^1.5.1",
"rollup": "^4.21.3",
"rollup-plugin-filesize": "^10.0.0",
"shiki": "^1.22.1",
"tslib": "^2.6.2",
"typescript": "^5.5.4",
"vitepress": "^1.3.4"
"vitepress": "^1.4.1"
}
}