ウィジェットモジュール

説明

外部サイトでデータセットやプロダクト分析を可視化する埋め込みウィジェット。APIキーと許可ドメインで認可します。

概要アクティビティ図

---
config:
  theme: base
  layout: dagre
  flowchart:
    curve: linear
    htmlLabels: true
  themeVariables:
    edgeLabelBackground: "transparent"
---
flowchart TB
    Site[Client Website]
    Gateway[API /api/v1/widget]
    Middleware{ValidateWidgetRequest}
    Embed(EmbedWidgetController)
    Analyzer(ProductAnalyzerController)
    Datasets[(Dataset Histories)]

    Site --- Step1[
      <div style='text-align: center'>
        <span style='display: inline-block; background-color: #6699cc !important; color:white; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; font-weight: bold'>1</span>
        <p style='margin-top: 8px'>Request with API key</p>
      </div>
    ]
    Step1 --> Gateway

    Gateway --- Step2[
      <div style='text-align: center'>
        <span style='display: inline-block; background-color: #6699cc !important; color:white; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; font-weight: bold'>2</span>
        <p style='margin-top: 8px'>Validate key & domain</p>
      </div>
    ]
    Step2 --> Middleware

    Middleware --> Embed
    Middleware --> Analyzer

    Embed --> Datasets
    Analyzer --> Datasets

    Datasets --> Embed
    Datasets --> Analyzer

    Embed --> Site
    Analyzer --> Site

    style Site fill:#e6f3ff,stroke:#0066cc,stroke-width:2px
    style Gateway fill:#e6f3ff,stroke:#0066cc,stroke-width:2px
    style Middleware fill:#f5f0ff,stroke:#9966cc,stroke-width:2px
    style Embed fill:#f0f8e6,stroke:#339933,stroke-width:2px
    style Analyzer fill:#f0f8e6,stroke:#339933,stroke-width:2px
    style Datasets fill:#ffe6cc,stroke:#ff9900,stroke-width:2px
    style Step1 fill:transparent,stroke:transparent,stroke-width:1px
    style Step2 fill:transparent,stroke:transparent,stroke-width:1px

モジュール一覧