yuktaone-query-builder-lib v1.0.1

Angular YuktaOne Query Builder

See Demo page.

Versions

Table of contents

=================

• Features
• Getting started
• Usage
• API

Features

• YQL will be the most flexible way to search data on any platform.
• YQL stands for YuktaMedia Query Language and it will be the most powerful and flexible way to search for your data on the platform

Warning

Library is under active development and may have API breaking changes for subsequent major versions after 1.0.0.

Getting started

Step 1: Install yuktaone-query-builder-lib:

NPM

npm install yuktaone-query-builder-lib

Step 2: install the ng-select and fontawesome:

NPM

npm install --save @ng-select/ng-select

npm install --save @fortawesome/fontawesome-free

Step 2: Import the YuktaoneQueryBuilderLibModule module:

import { YuktaoneQueryBuilderLibModule } from 'yuktaone-query-builder-lib';

@NgModule({
  declarations: [AppComponent],
  imports: [YuktaoneQueryBuilderLibModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Include a theme:

To allow customization and theming, yuktaone-query-builder-lib bundle includes only generic styles that are necessary for correct layout and positioning. To get full look of the control, include one of the themes in your application. If you're using the Angular CLI, you can add this to your styles.scss or include it in .angular-cli.json (Angular v5 and below) or angular.json (Angular v6 onwards).

"styles": [
              "node_modules/@fortawesome/fontawesome-free/css/all.css"
              "node_modules/@ng-select/ng-select/themes/default.theme.css"
            ],

add this to your styles.scss

.ng-select.ng-select-single .ng-select-container {
    height: 36px;
    display: none !important;
}
.ng-dropdown-panel.ng-select-bottom {
    top: 39px !important;
    left: 8px!important;
}

Usage

Define options in your consuming component:

@Component({...})
export class ExampleComponent {
  expressionValuefinal = '';
   yqbConfig = {
    "fields": [
      {
        "field_type": "dimension",
        "operator_type": "string",
        "display_name": "App Name",
        "value": "app_name",
        "values": [],
        "value_type": "custom",
        "is_active": true
      },
      {
        "field_type": "metric",
        "operator_type": "number",
        "display_name": "Phone Code",
        "value": "phone_code",
        "values": [],
        "value_type": "dynamic",
        "is_active": true
      },
      {
        "field_type": "dimension",
        "operator_type": "string",
        "display_name": "CountryName",
        "value": "country_name",
        "values": [],
        "value_type": "dynamic",
        "is_active": true
      },
      {
        "field_type": "dimension",
        "operator_type": "string",
        "display_name": "City Name",
        "value": "city_name",
        "values": ["Kolhapur", "Pune", "Satara", "Mumbai", "Nagpur", "Nashik", "Aurangabad", "Mira-Bhayandar", "Dhule"],
        "value_type": "static",
        "is_active": true
      }, {
        "field_type": "dimension",
        "operator_type": "bool",
        "display_name": "Bot Status",
        "value": "bot_status",
        "values": ["0", "1"],
        "value_type": "static",
        "is_active": true
      },
      {
        "field_type": "metric",
        "operator_type": "number",
        "display_name": "Age",
        "value": "age",
        "values": [],
        "value_type": "custom",
        "is_active": true
      },
      {
        "field_type": "metric",
        "operator_type": "decimal",
        "display_name": "Revenue",
        "value": "revenue",
        "values": [],
        "value_type": "custom",
        "is_active": true
      }],
    "field_value_api": {
      "url": this.BASE_URL + "/umf/v1/auth/getYqbFieldData/builder/sql/builder",
      "request": {
        "key": "name",
        "dimensions": [],
        "limit": "100",
        "offset": "100"
      }
    }
  }

  queryChanged(query) {
    console.log('query changed', query);
  }

In template use yuktaone-query-builder-lib component with your options

<!--Using ng-option and for loop-->
<yuktaone-query-builder [expressionValuefinal]="expressionValuefinal" [yqbConfig] ="yqbConfig" (queryChanged)="queryChanged($event)"></yuktaone-query-builder>

API

Inputs

Outputs