AFC SportDB Widgets Library project

AFC SportDB Widgets Library project for a full data integration on the future AFC.com website. AFC SportDB Widgets Library - npm library with several pages and widgets (opta, gratenotes, etc.)

Use technologies:

Production:

• VueJS 2
• VueI18n
• Vuetify

Dev:

• Jest
• Eslint
• Husky
• Storybook
• Prettier
• Webpack-bundle-analyzer
• Cross-env etc.

Useful commands:

Install dependency. Install dependency libraries (vue-i18n, vuetify, etc.)

npm ci --only=production

Compiles and hot-reloads for development. Run the project on localhost:8080 in DEVELOPMENT mode.

npm run serve

Compiles and minifies lbrary for production. Build project in PRODUCTION mode (compile and minimize).

npm run build-lib

Run your unit tests. Run unit tests with Jest library. Package tests/unit.

npm run test:unit

Lints and fixes files. Project uses eslint, prettier.

npm run lint

Run storybook on localhost:6006

npm run storybook

Install locally afc-widgets-lib library. Command "npm link" - create symlink for impementation in your project without npm registry.

git clone https://gitlab.sportradar.ag/dsv/afc/sportdb/afc-sportdb-widgets-library.git &&
cd afc-sportdb-widgets-library &&
sudo npm link &&
cd your_project/ &&
npm link afc-widgets-lib

Removing locally afc-widgets-lib library from a project

npm unlink afc-widgets-lib

Use npm library afc-widgets-lib

1. Download project using command

git clone https://gitlab.sportradar.ag/dsv/afc/sportdb/afc-sportdb-widgets-library.git

2. Create symlink using command

npm link

3. Implement afc-widgets-lib library using command in your project. Command npm lint put symlink of afc-widgets-lib library into node_modules your project.

npm link afc-widgets-lib

4. Import afc-widgets-lib library using the command

import {
    AfcWidgetsLib,
} from 'afc-widgets-lib';

// Register component

components: {
    AfcWidgetsLib,
}

Widgets component using for widgets

5. Setup OPTA Service. Include styles and javascript into your index.html file.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<link rel="stylesheet" href="http://widget.cloud.opta.net/v3/css/v3.football.opta-widgets.css">

<script src="http://widget.cloud.opta.net/v3/v3.opta-widgets.js"></script>
<script>
    var opta_settings = {
        subscription_id: '978d5d7e1501e56a5e0b49e800ca7d65',
        language: 'en_GB',
        timezone: 'Europe/London'
    }
</script>

6. Use Library AfcWidgetsLib.

// Pages:

// Page Match Center
<AfcWidgetsLib 
    :typeComponent="'pages'" 
    :themePage="1"
    :namePage="'Matches'"
/>

// Widgets:

// OPTA Widgets
<AfcWidgetsLib 
    :typeComponent="'widgets'" 
    :nameWidget="[
        'playerComparison',
        'timeline',
        'matchStats',
        'teamStats',
        'heatMap',
        'actionArea',
        'averagePositions',
        'attackingThirds',
        'chalkboard',
        'goalReplay',
        'passCombination',
        'commentary',
        'lineups',
        'standing',
    ]"
/>

// Live Score Bar Widget
<AfcWidgetsLib 
    :typeComponent="'widgets'" 
    :typeWidget="'custom'"
    :customLayout="'LiveScoreBar'" 
/>

// Fixtures widget:
// 1 Design
<AfcWidgetsLib 
    :typeComponent="'widgets'" 
    :typeWidget="'custom'"
    :customLayout="'FixturesModuleV3'" 
/>
// 2 Design
<AfcWidgetsLib 
    :typeComponent="'widgets'" 
    :typeWidget="'custom'"
    :customLayout="'FixturesModuleV1'" 
/>