Rename samples

2022-09-09 20:58:32 +05:30
parent 00b80d224c
commit 9777be9a7b
5 changed files with 69 additions and 38 deletions
@@ -35,7 +35,7 @@ describe('Check actions', () => {

 		// Verify downloaded file is different for different diagrams
 		cy.contains('Sample Diagrams').click();
-		cy.contains('ER Diagram').click();
+		cy.contains('ER').click();

 		cy.get(`#downloadPNG`).click();
 		verifyFileSize('diagram', 'png', 46_000);
@@ -13,13 +13,13 @@ describe('Editor docs tests', () => {
 	});

 	it('Test to see if the correct URL loads when changing from one diagram to other', () => {
-		cy.contains('Flow Chart').click();
+		cy.contains('Flow').click();
 		cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');

 		cy.contains('Config').click();
 		cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');

-		cy.contains('Sequence Diagram').click();
+		cy.contains('Sequence').click();
 		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');

 		cy.contains('Code').click();
@@ -27,7 +27,7 @@ describe('Editor docs tests', () => {
 	});

 	it("Test to check URLs for a case where config URL doesn't exist", () => {
-		cy.contains('State Diagram').click();
+		cy.contains('State').click();
 		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');

 		cy.contains('Config').click();
@@ -20,9 +20,9 @@ describe('Site Loads', () => {

 	it('should load sample diagrams when clicked', () => {
 		cy.contains('Sample Diagrams').click();
-		cy.contains('Pie Chart').click();
+		cy.contains('Pie').click();
 		cy.contains('pie title Pets adopted by volunteers');
-		cy.contains('Class Diagram').click();
+		cy.contains('Class').click();
 		cy.contains('classDiagram');
 	});

@@ -16,7 +16,7 @@ module.exports = {
      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
    }
  },
-  "__version": "10.6.0",
+  "__version": "10.7.0",
  "Auto sync tests": {
    "should dim diagram when code is edited": {
      "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"
@@ -4,19 +4,19 @@
 	import { logEvent } from '$lib/util/stats';

 	const samples = {
-		'Flow Chart': `graph TD
+		Flow: `graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]`,
-		'Sequence Diagram': `sequenceDiagram
+		Sequence: `sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
            `,
-		'Class Diagram': `classDiagram
+		Class: `classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
@@ -38,7 +38,7 @@
      +run()
    }
            `,
-		'State Diagram': `stateDiagram-v2
+		State: `stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
@@ -46,7 +46,7 @@
    Moving --> Crash
    Crash --> [*]
            `,
-		'Gantt Chart': `gantt
+		Gantt: `gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
@@ -56,22 +56,22 @@
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
            `,
-		'Pie Chart': `pie title Pets adopted by volunteers
+		Pie: `pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
            `,
-		'ER Diagram': `erDiagram
-          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-          CUSTOMER ||--o{ ORDER : places
-          CUSTOMER ||--o{ INVOICE : "liable for"
-          DELIVERY-ADDRESS ||--o{ ORDER : receives
-          INVOICE ||--|{ ORDER : covers
-          ORDER ||--|{ ORDER-ITEM : includes
-          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+		ER: `erDiagram
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+    CUSTOMER ||--o{ ORDER : places
+    CUSTOMER ||--o{ INVOICE : "liable for"
+    DELIVERY-ADDRESS ||--o{ ORDER : receives
+    INVOICE ||--|{ ORDER : covers
+    ORDER ||--|{ ORDER-ITEM : includes
+    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+    PRODUCT ||--o{ ORDER-ITEM : "ordered in"
            `,
-		'User Journey': `  journey
+		'User Journey': `journey
    title My working day
    section Go to work
      Make tea: 5: Me
@@ -81,18 +81,35 @@
      Go downstairs: 5: Me
      Sit down: 3: Me
      `,
-		'Git Graph': `    gitGraph
-      commit
-      commit
-      branch develop
-      checkout develop
-      commit
-      commit
-      checkout main
-      merge develop
-      commit
-      commit
-`
+		Git: `gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+`,
+		Mindmap: `mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectivness<br/>and eatures
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid`
 	};

 	const loadSampleDiagram = (diagramType: string): void => {
@@ -102,13 +119,27 @@
 		});
 		void logEvent('loadSampleDiagram', { diagramType });
 	};
+
+	const diagramOrder: (keyof typeof samples)[] = [
+		'Sequence',
+		'Flow',
+		'State',
+		'Class',
+		'Gantt',
+		'Pie',
+		'ER',
+		'User Journey',
+		'Git',
+		'Mindmap'
+	];
 </script>

 <Card title="Sample Diagrams" isOpen={false}>
 	<div class="flex gap-2 flex-wrap p-2">
-		{#each Object.keys(samples) as sample}
-			<button class="btn btn-primary normal-case btn-sm" on:click={() => loadSampleDiagram(sample)}
-				>{sample}</button>
+		{#each diagramOrder as sample}
+			<button
+				class="btn btn-primary normal-case btn-sm flex-grow"
+				on:click={() => loadSampleDiagram(sample)}>{sample}</button>
 		{/each}
 	</div>
 </Card>